Using Links to Create Vertical Navigation Menus

Whether your website's navigation menu is a horizontal row across the top or a vertical row down the side, it's just a list. When designing web navigation, a navigation menu is a group of links. When you program your navigation using XHTML+CSS, you can create a menu that is small to download (XHTML) and easy to customize (CSS).

Getting Started

To design a list for navigation, you need to use a list. It may be a standard unordered list that has been identified as the navigation. For example:

• Home
• Products
• Services
• Contact Us

When looking at the HTML, the Home link has an ID of

youarehere

This allows you to create a menu that identifies the current location for your readers. Even if you don't plan to have 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. When using placeholder links, most browsers don't display the links as clickable (underlined and in blue). When you paste the HTML into a web page, your navigation looks like this:

• Home
• Products
• Services
• Contact Us

This doesn't look much like a menu. However, with a few CSS styles added to the list, you can create a menu that makes you proud.

If you'd like more examples of vertical menus, do a web search for the following:

• 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

Vertical Navigation Menu

A vertical navigation menu is 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 styling menus, start at the outside and work in. First, style the navigation:

ul#navigation

Then, move to the elements and links. First, define the width of the menu. This ensures that if the menu items are long, the items won't push the rest of the layout over or cause horizontal scrolling.

ul#navigation { width: 12em; }

After you set the width, work on the list items. This allows you to set things like 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;
} 

After you set the basics for the list items, work on how the menu looks in the links area. First style the navigation:

UL#navigation LI A

Then, style the following:

A:link
A:visited
A:hover
A:active

For the links, make the links a block element (rather than the default in-line). This forces links to take up the entire space of the LI, and act like a paragraph, making links easier to style as menu buttons. Then, remove the following:

underline,text-decoration: none;as

This makes the buttons look more like buttons. 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;
}

With the display: block; set on the links, the entire box of the menu item is clickable, not only the letters. This is also good for usability. Set the link colors (link, visited, hover, and active) if you want links to be different from the default blue, red, and purple.

a:link, a:visited { color: #fff; }
a:hover, a:active { color: #000; }

You can also give the hover state a bit of attention by changing the background color.

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

Horizontal Navigation Menu

Creating horizontal navigation menus is 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, create the navigation menu list:

• Home
• Products
• Services
• Contact Us

To create a horizontal menu, work the same as you did with the vertical menu. Start with the outside and work in. To start the navigation in the left corner, set it with 0 left margin and padding, and float it to the left.

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. You can also add a background color to the list to make it easier to read.

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

The secret to the horizontal navigation menu is in the list items. List items are normally block elements, which means that these items 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 horizontally next to one another.

ul#navigation li { display: inline; }

Treat the links exactly like the vertical navigation menu, with the same colors and text decoration. Add a top border to delineate the buttons when the user hovers over a button. Then, remove display: block; as that puts the newlines back in and destroys the horizontal menu.

You Are Here Location Information

Another aspect of HTML is this identifier:

youarehere

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

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

If you'd like more examples of horizontal menus, search the web for 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