Lists for Navigation
When you think of designing web navigation, it's easy to forget that all a navigation menu is is a glorified list of links. Whether your navigation menu is a horizontal row across the top or a vertical row down the side, it's still just a list. And if you program your navigation using XHTML+CSS you can create a menu that is small to download (the XHTML) and easy to customize (the CSS).
To start designing a list for navigation, you need to use a list. All I use is a standard unordered list that has been identified as the navigation:
<nav>
<ul>
<li id="youarehere"><a href="#">Home</a>
<li><a>Products</a>
<li><a>Services</a>
<li><a>Contact Us</a>
</ul>
</nav>
If you look closely at the HTML, you'll notice that the “Home” link also has an id of youarehere. This will allow me to create a menu that identifies the current location for your readers. Even if you don't plan on having that type of visual cue on your site right now, you can leave that in. Then, if you decide to add the cue later, you'll have less coding to prepare your site.
Without any CSS styling, this XHTML menu looks like a standard unordered list. There are bullets and the list items are slightly indented. Because I am using placeholder links, most browsers won't display the links as clickable (underlined and in blue). If you paste in the above HTML into a web page, your navigation will look like this:
- Home
- Products
- Services
- Contact Us
This is pretty boring, and doesn't look much like a menu. But with just a few CSS styles added to the list, you can create a menu to be proud of.
Vertical Navigation Menu
A vertical navigation menu is very easy to write because it displays in the same way as a normal list: up-and-down. The list items display vertically down the page.
When I'm styling menus, I like to start at the outside and work in. By this I mean that I first style the ul#navigation and then move to the li elements and then the links, and so on. Thus, for this menu, first you define the width of the menu. This will insure that even if the menu items are long, they won't push the rest of the layout over, or cause horizontal scrolling.
ul#navigation { width: 12em; }
Once I've got the width set, I can play with the list items. This allows me to set things like list-style (to get rid of the bullets), background colors, borders, text alignment, and margins.
ul#navigation li {
list-style: none;
background-color: #039;
border-top: solid 1px #039;
text-align: left;
margin: 0;
}
Once you've set the basics for the list items you can start playing with how the menu looks in the links area. First you should style the UL#navigation LI A, then the A:link, A:visited, A:hover, and A:active (if you want them). For the links, I like to make the links a block element (rather than the default in-line). This forces them to take up the entire space of the LI—and they act more like a paragraph, which makes them easier to style as menu buttons.The other thing I always do is remove the underline (text-decoration: none;), as this makes the buttons look more like buttons to me. But of course, your design might be different.
ul#navigation li a {
display: block;
text-decoration: none;
padding: .25em;
border-bottom: solid 1px #39f;
border-right: solid 1px #39f;
}
Notice that with the display: block; set on the links, the entire box of the menu item is clickable, not just the letters. This is also good for usability. Make sure to set the link colors (link, visited, hover, and active) if you want them to be different than the default blue, red, and purple.
a:link, a:visited { color: #fff; }
a:hover, a:active { color: #000; }
I also like to give the hover state a bit more attention by changing the background color.
a:hover { background-color: #fff; }
The next page of this article shows you how to create a horizontal navigation menu. And below are some examples of vertical menus.
