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


Build a Flexible CSS Web Navigation Architecture : Page 2

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.


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:

<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,
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:

<body id="home">
 <div id="navigationBlock">
    <li> <a href="/" id="navHome">Home</a> </li>
    <li> <a href="/products.htm" id="navProducts">Products</a> </li>

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 serves as the SOA Practice Lead for Web Age Solutions, a provider of technology education and mentoring. Since 2001 he has contributed extensively to the SOA/web services body of knowledge as an author, speaker, consultant, and open source contributor. Find Kyle on the Web at http://www.gabhart.com or reads his blog on SOA at SOAmatters.com.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date