The Bulletproof approach is best explained on A List Apart in an article titled Sliding Doors of CSS. I used this same article to build the navigation on this site. Go ahead change the text size and watch the tabs effortlessly grow and shrink.
I’m not going to post any code on this topic because the Sliding Doors article pretty much covers it, but I’ll cover the basic idea. You’ll start with a standard unordered list such as:
Once you style them to float, they become horizontal. Two oversized images are used to create the tab backgrounds and this is where the scalability comes in. Because the images are larger than you need them to be, if someone changes the text size the two images slide open and adjust to the new text size.
The id=”1″, “2” etc. is used for for a current state tab. When the page is on that tab, the tab is highlighted. You can see this on my site as well.
The benefits are obvious, simple mark up, scalability, and update-ability make this a much easier and smarter approach to navigation. Check my style sheet or follow the Sliding Doors article and you’ll have scalable navigation in no time. Go around and see if your favorite sites are using this technique. Looking at other sites is also a great way to gather some design ideas.
If you have any questions feel free to leave a comment. Otherwise I’ll see you next Tuesday with Chapter 3.