The Design Center / DT&G / Web Design & Review / Tutorial: Create tabbed navigation with CSS / Page 2  

Creating tabbed navigation with CSS, continued from the previous page, from the book The CSS Anthology: 101 Essential Tips, Tricks & Hacks by Rachel Andrew...

Here's our page so far... displaying the navigation after styling the ul element
Our tabbed navigation so far.

Now we need to style the list items

CSS code for FLOAT

This rule uses the float property to position the list items horizontally while maintaining the block-level status of each.

We then add the first of our "sliding door" images -- the thin left-hand side of the tab -- as a background image. A single-pixel right margin on the list item creates a gap between one tab and the next.

example of horizontal tabs
This shows that the left-hand tab image now appears for each tab.

Styling the Links with CSS

Next, we style the links, completing the look of our tabs in their unselected state. The image that forms the right-hand side of the tab is applied to each link, completing the tab effect:

CSS code for the tabs

The results are shown here

results of float and style

If you increase the text size in the browser, you can see that the tabs neatly increase in size too. In fact, they do so without overlapping and without the text protruding out of the tab -- this is because we have used images that allow plenty of room for growth.

To complete the tab navigation, we need to highlight the tab that corresponds to the currently displayed page.

You'll recall that each list item has been assigned a unique class name. If we assign to the body element an ID that has a value equal to the value of each list item class, CSS can do the rest of the work:

Code

Matching the Body ID

Although it looks like a lot of code, the CSS code that styles the tab matching the body ID is relatively straightforward. The images I've used are exact copies of the left and right images that we applied to the tabs, but they're a different color, which produces the effect of one tab appearing to be highlighted. Here's the CSS:
ID code to style for each page

With these rules in place, specifying an ID of recipes to our body will cause the Recipes tab to be highlighted, specifying contact will cause the Contact Us tab to be highlighted, and so on.
Click here to see the results

Useful ideas in web designIdentifying a Useful Technique -- The technique of adding an ID to the bodyelement can be very useful. For example, you may have different color schemes for different sections of your site, to help the user identify which section they're using. You can simply add the section name to the bodyelement and make use of it within the style sheet, as we did in this example.

Rachel AndrewRachel Andrew

Rachel Andrew is a web developer and the director of web solutions provider . When not writing code, she writes about writing code and is the coauthor of several books promoting the practical usage of web standards alongside other everyday tools and technologies. Rachel takes a common sense, real world approach to web standards, with her writing and teaching being based on the experiences she has in her own company every day.
Check out these recommended titles:

Return to the first page of this article

 

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