1. Technology

Horizontal Navigation Menus

Using Links to Create Navigation Menus

By

Page one of this article explains how to use lists to create vertical navigation menus.

Horizontal Navigation Menu

Creating horizontal navigation menus are slightly more difficult than vertical navigation menus because you have to offset the tendency that HTML lists have of wanting 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

One other aspect of my HTML I didn't mention 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 to style your lists turnsyour lists into a very powerful tool for design.

The first page of this article shows you how to create a vertical navigation menu. And below are some examples of horizontal menus.

©2014 About.com. All rights reserved.