Build a Flexible CSS Web Navigation Architecture
Printed from http://www.devx.com/webdev/Article/32424
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.
by Kyle Gabhart (Much thanks to Kyle!)
The 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.
The Problem
How do I develop a simple menu system for my Web site that is visually compelling, flexible, and easily maintainable?
The Solution
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="navigation">
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About</a> </li>
<li> <a href="services.html">Services</a> </li>
<li> <a href="events.html">Events</a> </li>
<li> <a href="multimedia.html">Multimedia</a> </li>
<li> <a href="donate.html">Donate/Store</a> </li>
<li> <a href="resources.html">Resources</a> </li>
</ul>
</div>
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.
Removing the bullets is as simple as applying a list-style: none attribute to the list elements via CSS:
#navigation ul li {
list-style: none;
}
Horizontal List
To orient the list items horizontally, use the display: inline CSS attribute:
#navigation 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:
#navigation 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
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:
- Draw a box around each list item.
- Remove the bottom border of the box, specify a background color.
- Remove the line under each link.
- Set margin and padding.
Here's the code:
#navigation 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:
#navigation ul li a:link {
color: #6666CC;
}
#navigation ul li a:visited {
color: #999999;
}
#navigation ul li a:hover, #navigation 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:
#navigation 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:
<li> <a href="/" id="navcurrent">Home</a> </li>
By moving the navcurrent ID to the corresponding link for each page, you make the tab appear correctly on every page (see Figure 3).
Figure 3. The Tab Appears Correctly on Every Page |
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, (subsitute your page names for these)
body#about a#navAbout,
body#services a#navServices,
body#events a#navEvents,
body#donate a#navDonate
body#contact a#navContact {
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:
<body id="home">
<div id="navigation">
<ul>
<li> <a href="/" id="navHome">Home</a> </li>
<li> <a href="/about.html" id="navAbout">About</a> </li>
...
</ul>
</div>
...
</body>
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.
Kyle Gabhart is a Senior Principal Information Systems Architect withL-3 Communications, Link Simulation and Training Division. Author of dozens of articles and books, Kyle has served as a consultant, trainer, and mentor for Fortune 500 companies, including American Express, J.P. Morgan-Chase, Goldman Sachs, and Verizon. Find Kyle on the Web at http://www.gabhart.com and reach him by email at rkgabhart@link.com.