Why It's Bulletproof
We just took a pleasing tab navigation design from a high-profile Web site, ripped it apart, and reconstructed a similar system with less code that is easily updatable, more accessible to a wider range of browsers, devices, and assistive softwareand most notably is
, regardless of the
Because of the steps we took to creatively align background images and assign colors, the entire tab set is
. If the
Figure 2.14. This tab design can be scaled up or down by adjusting the text size in the browser.
In a matter of minutes, we can also change the wording and/or add or remove tabs for instant updates, simply by editing the unordered list that's used to structure the navigation items (Figure 2.15). All that needs to change is the text within each list item in our markup:
<ul id="nav"> <li id="t-intro"><a href="/">Home</a></li> <li id="t-about"><a href="about.html">Why Lance Rules</a></li> <li id="t-news"><a href="news.html">The Latest News</a></li> <li id="t-sponsors"><a href="sponsors.html">People Who Like Lance</a></li> </ul>
Figure 2.15. It takes just a few seconds to change the text for each tab by updating our easy-to-read, unordered list.
To take the concepts from this chapter a step further, be sure to dig into these additional examples that offer distinct designs that share the flexibility of the tabs we've just
A recent redesign of Mozilla.org introduced rounded tab navigation that
Figure 2.16. Rounded corners can be easily achieved by using the Sliding Doors technique, as seen here at Mozilla.org.
The Mozilla team utilized a technique developed by Douglas Bowman called the Sliding Doors of CSS (www.alistapart.com/articles/slidingdoors/). Bowman devised a clever way of using two back-ground images that
as the contents inside them expand. By using two separate images, rounded corners and other non-box
The need for slant-separated yet flexible navigation arose for a client project, and the results required just a single background image that would reveal more or less of itself depending on the size of text contained within (Figure 2.17).
Figure 2.17. By using a larger-than-necessary slant background image, the effect can