Website Navigation

Vertical Navigation Menu

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 have a list. All I use is a standard unordered list that has been identified as the navigation:

<ul id="navigation">
<li id="urHere"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

If you look closely at the XHTML, you'll notice that the "Home" link also has an id of "urHere". This will allow me to create a menu that identifies the current location for viewers. 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 this:

• Home
• About Us
• Gallery
• Services
• Contact Us

Which 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

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 and then the links, and so on. So my first move for this menu is to 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 links themselves. 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;
}

The links are where the action is. 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:active, and a:hover (if you want them). For the a 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 site 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 a 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, active, and hover) 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.

a:hover { background-color: #fff; }

» With vertical navigation added, here is our Pet Poop, Inc. example.

For horizontal navigation, see Horizontal Nav.

 

Posted: 4-13-2011