CSS Cookbook

3.11. Designing a Dynamic Visual Menu

Problem

You want to build a curved tab navigation menu that works even when text is resized; Figure 3-21 shows the default.

Figure 3-21. The dynamic folder tab navigation

Solution

First write the markup for the navigation menu:

<div id="header">
 <h2>Personal Site dot-com</h2>
 <h5>Site navigation:</h5>
 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li> 
  <li><a href="/archives/">Archives</a></li>
  <li><a href="/writing/">Writing</a></li>
  <li id="current"><a href="/speaking/">Speaking</a></li> 
  <li><a href="/contact/">Contact</a></li>
 </ul>
</div>

Then create two folder tab images: one tab for anchor links and another tab to represent the current page viewed by the user. Split the folder tab image into two images as shown in Figure 3-22.

Figure 3-22. The folder tab image split in two; note the curves in the upper corners of the images

Then place the right side of the folder tab in the background of the list item:

#header li {
 float:left; 
 background-image: url(tab_right.gif);
 background-repeat: no-repeat;
 background-position: right top; 
 margin:0;
 padding: 0;
}

Place the left side of the folder tab in the background of the anchor element:

#header a { display: block; background-image: url("tab_left.gif"); background-repeat: no-repeat; background-position: ...