RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Build a Flexible CSS Web Navigation Architecture

Through the power of CSS, you can transform an ordinary list of links into a robust, flexible Web navigation architecture. This solution delivers simplicity, maintainability, and flexibility in a compelling tabbed menu GUI.

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:

<div id="navigationBlock">
    <li> <a href="/">Home</a> </li>
    <li> <a href="/products.htm">Products</a> </li>
    <li> <a href="/services.htm">Services</a> </li>
    <li> <a href="/careers.htm">Careers</a> </li>
    <li> <a href="/about.htm">About</a> </li>

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.

Figure 1. Rendering of the Navigation Menu

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.

Figure 2. Rendering of Spruced Up Navigation Menu

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date