The Design Center / DT&G / Web Design & Review / Tutorial: Create tabbed navigation with CSS by Rachel Andrew  

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.

Web design tips Solution
The tabbed navigation shown below can be created by styling a horizontal list.

tabbed navigation
Web design tips Here's the HTML and CSS that creates this effect:

Discussion

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.
graphics for tabs

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:

Code for the navigation list

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):
coding for logo block

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:
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.

On the next page you'll see the results of our work so far.

 

 

Footnote:
1: Douglas Bowman's Sliding Doors of CSS

Useful ideas in web designCSS Anthology ©Copyright 2007, Rachel Andrew, Published with permission from Sitepoint, from the book:
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.

Return to Web Design & Review. . .

 

Get a Formal Critique or Site Makeover If you were disappointed that no one reviewed your site... or you would just like to get a check-up to see how you or your designer is doing, then consider getting a Formal Web Site Critique or Site Makeover

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.