he core of any Web site is the navigation mechanism, the menu. If Web sites are primarily about organizing and presenting content, a site’s menu provides the means of traversing this information set. In designing a Web navigation system, it is often difficult to balance the competing objectives of simplicity, flexibility, usability, and maintainability. Often very simple designs are not flexible; flexible designs trade off with usable ones; and easily maintainable designs are rarely even considered.

How do I develop a simple menu system for my Web site that is visually compelling, flexible, and easily maintainable?

Leverage Cascading Style Sheets (CSS) to produce a simple, HTML-formatted menu system built upon a flexible and maintainable architecture.

Define the Menu Links

At the core of a flexible CSS menu solution is a structured set of HTML markup for organizing the links. One of the most structured HTML elements available is the list element. For this solution, use an unordered list contained within a div tag (click here to download the index.htm example code). The following div tag serves as the container for the navigation menu:

  
    
 Home 
    
 Products 
    
 Services 
    
 Careers 
    
 About 
  

This is convenient because it enables you to position the menu in a specific location (absolute positioning) or relative to another element on the page (relative positioning) using CSS. Relative positioning is the default, and that is sufficient for now.

The links are organized within an unordered list. As such, each link should appear on its own line and be preceded by a bullet (the default rendering provided by most browsers). This design is very flexible, allowing you to add additional menu items by simply expanding the list with another element.

The current rendering of the menu is very boring and bland (see Figure 1). Next, you will apply some CSS styling to improve the menu’s aesthetics.

Format the Menu Text with Style

It’s time to spruce up that drab list of hyperlinks. To do that, you will take away the bullets, arrange the links horizontally across the page, and add some formatting to the menu as a whole.

Bye Bye Bullets

Removing the bullets is as simple as applying a list-style: none attribute to the list elements via CSS:

#navigationBlock ul li {  list-style: none;}

Horizontal List

To orient the list items horizontally, use the display: inline CSS attribute:

#navigationBlock ul li {  list-style: none;  display: inline;}

Style the Menu

To style the menu, you format the text, set padding and margin, and draw a line across the bottom of the menu:

#navigationBlock ul {  border-bottom: 1px solid #9999AA;    font: bold 11px Verdana, Arial, sans-serif;  margin-left: 0px;  padding: 3px 0px;}

By implementing these changes, you now have a much more visually appealing menu (see Figure 2). You could leave the menu as is, or take the instructions in the following section to further enhance the interface.

Visually Transform the Menu

In this final pass, you will transform the menu from a horizontal list of links to a fully graphical tabbed menu system.

Folder Tab Visual

To give the menu the folder tab appearance, take the following steps:

1. Draw a box around each list item.
2. Remove the bottom border of the box, specify a background color.
3. Remove the line under each link.
4. Set margin and padding.

Here’s the code:

#navigationBlock ul li a {  background: #eeeeff;    border: 1px solid #9999AA;  border-bottom: none;  margin-left: 1px;  padding: 3px 6px;  text-decoration: none;}

Define Mouseovers

To improve the feel of the menu, define CSS mouseovers to alter the tab’s response to user interaction. Format the links in a typical fashion (visited links appear differently), and use the hover attribute to specify a change to the tab background color and link color:

#navigationBlock ul li a:link {  color: #6666CC;}#navigationBlock ul li a:visited {  color: #999999;}#navigationBlock ul li a:hover, #navigationBlock ul li a:visited:hover {  background: #cccccc;  border-color: #333399;  color: #ffffff;}

Mark the Current Page’s Tab (Static HTML)

The final touch is to set the tab background color to indicate the current page the user is browsing. Accomplish this by setting #navCurrent ID on the element associated with the page in question:

#navigationBlock ul li a#navCurrent {  background: #ffffff; /* set to the same color as the page background */  border-bottom: 1px solid #ffffff; /* set line to same color as tab */}

This will also require a change to the HTML list on each page to indicate the link that should be marked:

 Home 

By moving the navCurrent ID to the corresponding link for each page, you make the tab appear correctly on every page (see Figure 3).

Mark the Current Page’s Tab (Dynamic HTML)

Setting the tab background color on each page is fine for static menu systems, but it is not practical for dynamic Web sites (JSP, ASP, PHP, etc.) where the menus tend to be stored in single files and included on individual pages as needed. One method for solving this is to specify an ID on the body tag of each page and IDs on every link. Then use CSS to modify the tab background for the corresponding page.

Associate the body tag ID with its corresponding link ID. Assign an ID to the body tag for a given page as identified here:

body#home a#navHome,body#products a#navProducts,body#services a#navServices,body#careers a#navCareers,body#about a#navAbout {  background: #ffffff; /* set to the same color as the page background */  border-bottom: 1px solid #ffffff; /* set line to same color as tab */}

You should then set IDs for the links accordingly. Consider the following example for the home page:

 
  
    
 Home 
    
 Products 
    ...  
 
 ...

The body tag ID should change for each page. You could either copy and paste the navigation div on each page, or put it in a separate file and dynamically include it. The end result is visually the same as the static HTML approach (see Figure 3).

A Simple, Flexible CSS Menu

Navigation is an essential element for the Web. While a slew of potential navigation architectures are available, few pass the tests of simplicity, maintainability, and flexibility. This solution passes each test and affords a compelling graphical tabbed menu interface. Through the power of CSS, an ordinary list of links can be transformed into a robust, flexible Web navigation architecture.