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: ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.