Tabbed Navigation

This section is cribbed from Dan Cederholm’s Bulletproof Web Design. In addition, take a look at Chris Bowman’s A List Aprt articles Sliding Doors of CSS and Sliding Doors of CSS, Part II. What we are going to look at here is a simple tabbed navigation.

To Begin

We start with an unordered list for our navigation. The list will go into a div, with the ID of nav (you can simply ID the ul). This should be old hat:

<div id="nav">
<ul>
	<li id="t-intro"><a href="#">Introduction</a></li>
	<li id="t-about"><a href="#">About Seahorses</a></li>
	<li id="t-news"><a href="#">News & Events</a></li>
	<li id="t-dross"><a href="#">Other Dross</a></li>
</ul>
</div>

As it is, unstyled, the list will look like this example.

Next, we will generate a couple of small images for the background, to add a little spice, texture, whatever. Here are the two, an on state and an off state, at 300% (3× actual size):

The idea here is that we will tile them horizontally, but we want them tall enough so that when or if the text is resize, they will simply slide up and still cover the background (thus “sliding doors”). These images are actually 25 by 50 pixels. They could be thinner and longer, but this size works OK for the demonstration.

First Style Applications

We start add some CSS, and begin by switching the navigation list from vertical to horizontal, by applying a float to the li, and removing the bullets. We also throw in a little padding and a color or two:

#nav
{
	width: 100%;
	background-color: #9C9;
}

#nav ul
{
	width: 90%;
	margin: 0;
	padding: 10px 0 0 46px;
	list-style-type: none;
	background: #9C9;
}

#nav ul li
{
	float: left;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", sans-serif;
	font-size: 85%;
}

At this point our example looks like this. Some fixing to do. To get the background color behind the list, we need to do something about the float. This is forcing the list elements outside the normal flow. The fix is to float its container as well, which is the ul tag. Also, we need to float the container that the ul is in, which is the #nav div (changes are in red):

#nav
{
	float: left;
	width: 100%;
	background-color: #9C9;
}

#nav ul
{
	float: left;
	width: 90%;
	margin: 0;
	padding: 10px 0 0 46px;
	list-style-type: none;
	background: #9C9;
}

The list now looks like so. (The next element below #nav will need a clear: left applied to clear the floats, or wicked things my ensue).

Forming the Tabs

So far so good. Now we can make the list look like a set of tabs. For this we latch onto the anchor tags, supplying them with display attributes (the float and block), some margin and padding numbers, the color and border, and the background image, set to repeat horizontally, anchored top left:

#nav ul li a
{
	float: left;
	display: block;
	margin: 0 .5em 0 0;
	padding: .25em .5em .25em .5em;
	color: #333;
	text-decoration: none;
	border: 1px solid #033;
	border-bottom: none;
	background: url(../ds_i/dk_bg.png) repeat-x top left;
}

With all that added, our example is reaching maturity.

Final Touches

Here’s the cool part. We want to add a border that is behind the active tab (the page we are on, or the hover state) , but in front of the inactive tabs. This is done by adding a background image to the container: the #nav div. We need a single-pixel high image, about 25px wide, which helps Explorer draw:

#nav
{
	float: left;
	width: 100%;
	background: #9C9 url(../ds_i/stripe.png) repeat-x left bottom;
}

As well, we add the hover state, and the current state. This can be done with a single declaration. Notice (or add…) the ID to the body—in this case intro—and the IDs on the list elements. These allow the ‘current page’ state. The hover state is pretty standard:

#nav a:hover, body#intro #t-intro a 
{
	color: #333;
	padding-bottom: 5px;
	background: url(../ds_i/lt_bg.png) repeat-x top left;
}

The hover state, aside form switching the background image, also increases the bottom padding, which pushes the image out over the line. Rather clever. This is what the finished menu should look like. The really cool thing about it is that it workks even if the text is scaled up quite a bit (you may need to make the background images longer…).