Using Links to Create Vertical Navigation Menus

A step-by-step guide

Whether your navigation menu is a horizontal row across the top or a vertical row down the side, it's still just a list. When designing web navigation, it's often easy to forget that a navigation menu is just a glorified group of links. But 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).

Getting Started

To start designing a list for navigation, you need to use a list.

It may be 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 you 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 include that information. 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 that makes you proud.

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, etc. So for this menu, first you define the width of the menu. This will ensure 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 (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 style the UL#navigation LI A and 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 from 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; }

If you'd like more examples of vertical menus, consult the list below.

  • A Styled Vertical Menu
  • A Basic Vertical Menu Template
  • A Styled Vertical Menu with You Are Here
  • A Basic Vertical Menu Template with You Are Here

Horizontal Navigation Menu

Creating horizontal navigation menus are slightly more difficult than vertical navigation menus because you have to offset the fact that HTML lists prefer to display vertically. As with the horizontal menu, first create your navigation menu list:

<nav>
  <ul>
    <li id="youarehere"><a href="#">Home</a>
    <li><a>Products</a>
    <li><a>Services</a>
    <li><a>Contact Us</a>
  </ul>
</nav>

To create a horizontal menu, work the same as you did with the vertical menu. Start with the outside and work in. Since I want my navigation to start in the left corner, I set it with 0 left margin and padding, and I float it to the left. You should also get in the habit of setting the width so that your menu doesn't take up more or less space than you intend. For horizontal menus, this is usually the full width of the design. I also added a background color to the entire list to make it easier to read.

ul#navigation {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #039;
}

But the secret to the horizontal navigation menu is in the list items. List items are normally block elements, which means that they will have a newline placed before and after each one. By switching the display from block to inline, you force the list elements to line up next to one another horizontally.

ul#navigation li { display: inline; }

I treated the links exactly like I treated them in the vertical navigation menu, with the same colors and text decoration. I added a top border to delineate the buttons when they are hovered over. The only thing I removed was the display: block; as that will put the newlines back in and destroy the horizontal menu.

ul#navigation li a {
  text-decoration: none;
  padding: .25em 1em;
  border-bottom: solid 1px #39f;
  border-top: solid 1px #39f;
  border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
  background-color: #fff;
  color: #000;
}

You Are Here Location Information

Another aspect of HTML is the youarehere identifier. If you want to modify your menu to indicate the current location of your users, simply use this ID to define a different background color or other style. Move that ID attribute to the correct menu item on other pages so that the current page is always highlighted.

ul#navigation li#youarehere a { background-color: #09f; } 

If you put these styles together on your page, you can create a horizontal or vertical menu bar that works with your site but is quick to download and very easy to update in the future. Using XHTML+CSS turns your lists into a very powerful tool for design.

If you'd like more examples of horizontal menus, consult the following.

  • A Styled Horizontal Menu
  • A Basic Horizontal Menu Template
  • A Styled Horizontal Menu with You Are Here
  • A Basic Horizontal Menu Template with You Are Here