There have been a number of great books on web design from the folks at SitePoint.com. One of our favorites -- and probably the one that we refer to most often for tricks and hacks is the The CSS Anthology: 101 Essential Tips, Tricks & Hacks by Rachel Andrew. We've heard this question about Tabbed Navigation over and over on discussion lists and forums, and when the Anthology came out, I just had to contact Rachel to see if she would share this excerpt with DTG readers. Thank goodness she said yes, so here is the answer to generating good, clean, CSS driven navigation tabs for your web site...
Tutorial: tabbed navigation with CSS
by Rachel Andrew
When I talk to designers and developers who don't use CSS, or use CSS only for simple text styling, one thing that I hear over and over again is that they just don't have time to learn this whole new way of working. After all, tables and spacer GIFs function, they get the job done, and they pay the bills.
I was lucky. I picked up CSS very early in the piece, and started to play with it because it interested me. As a result of that early interest, my knowledge grew as the CSS techniques themselves were developed, and I can now draw on six years' experience building CSS layouts every time I tackle a project. In this book, I've tried to pass on the tricks and techniques that allow me to quickly and easily develop web sites and applications using CSS.
How do I create tabbed navigation with CSS?
Navigation that appears as tabs across the top of the page is a popular navigation choice. Many sites create tabs using images. However, this approach suffers from the problems associated with text contained in images, which we discussed in "How do I replace image-based navigation with CSS?". However, it is possible to create a tab effect by combining background images and text styled with CSS.
The tabbed navigation shown below can be created by styling a horizontal list.
Here's the HTML and CSS that creates this effect:
The tabbed navigation approach I've used here is a basic version of Douglas Bowman's Sliding Doors of CSS method¹, which is a tried and tested technique for creating a tabbed interface. The structure that I've given to the navigation menu is the same kind of simple unordered list that we've worked with throughout this chapter, except that each list item is assigned a class attribute that describes the link it contains. We've also wrapped the entire list in a div with an id of header. The technique takes its name from the two images used to implement it -- one overlaps the other, and the images slide apart as the text size increases.
You'll need four images to create this effect: two to create the regular tab color, and two to use when the tab is the currently selected (highlighted) tab. The images I've used in this example are shown below.
As you can see, they're far wider and taller than would generally be necessary for a tab -- this provides plenty of space for the tab to "grow" if the user's browser is configured to display text at a very large size.
Here's the basic list of navigation items:
The first step is to style the container that surrounds the navigation.
We're going to give our header a simple bottom border for the purposes of this exercise, but on a real-world site this container may hold other elements in addition to our tabs (such as a logo or search field):
As you'll have noticed, we float the header to the left. We'll also float the individual list items; floating the container that houses them ensures that they remain contained once they're floated, and that the border will display below them.
Next, we create a style rule for the ul element inside the header:
This rule removes the bullets and alters the margin and padding on our list -- we've added two ems of padding to the top of the ul element.
1: Douglas Bowman's Sliding Doors of CSS
The CSS Anthology: 101 Essential Tips, Tricks & Hacks by Rachel Andrew (Paperback - Aug 14, 2007, Illustrated)
A practical guide on CSS (Cascading Style Sheets) for professionals and novices, that can be used both as a tutorial and read cover-to-cover or as a handy and practical reference book to common problems, solutions and effects. The 2nd edition is now full-color throughout and is completely updated and revised with the latest tips & tricks.
The CSS Anthology: 101 Essential Tips, Tricks & Hacks is ideal for experienced Web designers who would like to add sparkle to their existing designs, as well as newcomers who want to learn Web design the right way the first time.
Participate in your Design Center
Lots of fun and information for all... don't forget, any community is only as good as the participation of its members. We invite your tips, tricks, comments, suggestions and camaraderie.
- Ask for the DT&G Monthly: to receive DT&G newsletter each month, happenings in the Design Center and regular columns like the "Mail Bag" and "Cool Sites"
- DISCUSS this : in the Designers' CAFE forums
- Link to this site, and then show us the link. We'll send you any of our current door prizes, just for your trouble.
- Design Cafe: discuss Web Design amongst your peers
- SUBMIT: a link to a Photoshop web site
- Photoshop 911 tips and tricks
- SUBMIT: a link to a Photoshop web site
- Trademarks & Legal