designguide building navigation
With the introduction of pages to your website, a new need emerges: giving your users the ability to easily find their way around the site. Perhaps the most common way websites help users is this respect is with some form of global navigation that reflects the major destinations or content areas within a site.
In the following example we will create the most basic form of website navigation: a simple horizontal "nav bar" that lists all of the pages within your website. To begin lets create a new template module called "Navigation." In the template body, enter the following:
<ul id="nav">
<li><a href="<$mt:BlogURL$>">Home</a></li>
<mt:Pages>
<li>
<a href="<$mt:PagePermalink$>">
<$mt:PageTitle$>
</a>
</li>
</mt:Pages>
</ul>
Then in your banner or site header module (assuming you have created one), include the new navigational system.
<div id="header">
<h1><$mt:BlogName$></h1>
<h2><$mt:BlogDescription$></h2>
<$mt:include module="Navigation"$>
</div>
Once the navigation is in place, then it is just a matter of styling the markup to produce the desired visual. For a horizontal nav bar, this is what that CSS might look like:
ul#nav {
clear: both;
}
ul#nav li {
float: left;
}
Ok, the CSS above is perhaps too simple, but the gist should be clear: stack each of your navigational elements in a list, then float them using CSS.
The sample code above is perfect for a small website with only a handful of pages. What happens though when you have possibly tens or even hundreds of pages? You can't possibly list them all in a single nav bar. That would be overwhelming to a site's visitors, but more importantly it would most likely be ugly. And we can't have that!
So when a website has more pages than can be fit in a single nav bar, it becomes important for site owners to be able to specify which pages they want promoted there. To give administrators the control they are looking for we make use of one of Melody's most useful features: the hidden tag. Before however we talk about hidden tags, let's make sure we know what a basic, run-of-the-mill tag is.
Tags in many respects are nothing more than keywords that one can assign to a piece of content. Except tags, unlike keywords, are usually published and made visible to readers. Tags are also often hyperlinked allowing readers to click on the keyword or tag to find other content that has also been tagged with the same word or phrase.
Hidden tags therefore are a special kind of tag that can only be seen and edited from within the Melody administrative interface. They are never made visible to the public. They therefore provide designers with a convenient mechanism by which to filter content in the site by some arbitrary token.
In Melody a hidden tag is denoted by prepending the "@" sign to the tag in question.
Let's apply this concept to a site's navigation to illustrate. Suppose your website has over a hundred pages, but your site's horizontal nav bar only has room for five of those pages (give or take). To quickly give your users the ability to select which five pages they want to appear across the top of their site's banner, we use the hidden tag @topnav to filter our list of pages:
<ul id="nav">
<li><a href="<$mt:BlogURL$>">Home</a></li>
<mt:Pages tag="@topnav">
<li>
<a href="<$mt:PagePermalink$>">
<$mt:PageTitle$>
</a>
</li>
</mt:Pages>
</ul>
Once in place, you can instruct users to select which pages they want to appear in the navigation by editing each of the pages in question and adding the @topnav tag to the list of tags associated with the page. Then republish your site and presto, your new nav will appear.
- Prev: Simplifying Your Website Using Template Modules
- Next: How to Create a Custom Login and Screen
- Table of Contents: Building Websites with Melody, a Guide for Designers
Category: Guide
Tags: design guide, navigation, menu
Questions, comments, can't find something? Let us know at our community outpost on Get Satisfaction.
- Author: Byrne Reese
- Edited by: Violet Bliss Dietz