Create a horizontal menu (nav bar) using an XHTML list and CSS

---

In this post, learn how to create a horizontal menu, also known as a navigation bar, using an XHTML list and CSS.

 

Since 2004 or so, XHTML lists styled with CSS have been used for menus and navigation bars. Previously, tables were used to lay out menus, and you know that we don’t use tables any more for layout.

This post will enable you to get easily started with this style of menu. The technique is suitable for simple web sites, where you have only a few pages. However, it is not scalable, and will need modifications to be modular enough to use on any web site, especially those that feature server-side generated content.

 

Specifications for the menu

The menu must implement the following specifications:

• Easy, visible, click target
• Shows the current page clearly
• Mouse hover changes color

 

General approach

The following is the general approach we use to create the menu:

1. Use an unordered list
2. Make list items inline and fixed in size (style as needed)
3. Set the colours for normal, hover, and the "current" visible page
4. Edit each page to enable detection of the "current" visible page

 

Detailed steps

Here are the detailed steps:

Create a list for the menu items

Give the ul an id, so that we can style it.

Make the list items inline

Create a rule for the list item, to display: inline;

(Note that if the list is inside a container, you will then probably have to set the container’s height, otherwise overlap may happen.)

Remove the indentation etc. on the list itself (margin, padding)

Set the background colour for the list itself

Make alternate colours for normal, hover, and the "current" (visible) page

Set the background colour of a list item link (a element) to match the list’s background colour

Set other properties to match your requirements

For the hover state, set an alternate background colour

For the "current" (visible) state, set an alternate background colour

Edit each page to enable detection of the "current" visible page

Assume that this menu’s XHTML will be copied and used on multiple pages. In that situation, you must edit the XHTML, and add a class="current" attribute to the list item for the current (visible) page, which will enable the CSS rule above.

 

Articles that you should read, and resources that you should use

This post isn’t definitive in any way, because it is intended to get you started with this style of menu. For more information, you should work through these articles:

Drop-Down Menus, Horizontal Style

Turning a list into a navigation bar

Floating inline list items

Horizontal lists

Eric Meyer’s tabbed navbar

 

---