Matt Varone Creative Designer

— Although navigation bars can be styled very pretty using only text and CSS sometimes circumstances might require them to be image based. The problem this brings is that it’s not good at all to have the navigation’s markup to be actually made of linked images, being one of it’s biggest issue that search engines and screenreaders wouldn’t be able to pick up the text in those images. And it gets even worst if its have to be animated as most of the solutions for that would require Javascript. Having that said, in this short article I will hopefully show you how I create these animated imaged based, navigation bars in an clean and accessible way using images and CSS.

Preparing the XHTML:

Ok, lets pretend we need to have the following buttons: Home, Services, About Us and Contact Us. We will use a list to create the navigation bar, as navigation bars are a list of links, so they should be marked up as such:

<ul id="topnav">
    <li id="topnav_1"><a href="home.html" title="Home">Home</a></li>
    <li id="topnav_2"><a href="services.html" title="Services">Services</a></li>
    <li id="topnav_3"><a href="about-us.html" title="About Us">About Us</a></li>
    <li id="topnav_4"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
</ul>

You might notice that we gave unique ids to the list and it’s elements to be able to style them separately, we will get into that later.

Image buttons:

Now lets get our hands on the images. I like to use the “sprite image technique”, because it reduces files count, often reduces file size ( which saves bandwidth ), speeds up page load times, makes it easier to maintain and plus it’s fun!. For this example I made a very simple 480×40px navigation bar, let’s take a look at it:

You can see that we have in one image the three instances of the navigation bar with all its buttons. These instances cover the three possible buttons state we need: normal, over and current.

CSS VOODOO:

Here comes the magic ingredient, the CSS. We will use CSS’s power to position each button and instance of our navigation bar image in its own link. First, we start by setting up the list ( navigation bar ) width and height and then removing the item bullets and telling the list to display the items side by side:

/* TOP NAVIGATION BAR
/////////////////////////////////////*/

ul#topnav {
		width:480px;
		list-style:none;
		height:40px;
}

ul#topnav li {
		display:inline;
}

The following step is to add the general rules for the links. We gonna float them to the left, shift their text -9999px to hide it put it out of the screen:

ul#topnav li a {
		height:40px;
		float:left;
		text-indent:-9999px;
}

Now as each link has a different width size and background portion we gonna assign the correct values to each of them with width and the CSS background property. I made a simple schema to show you from where I get values we will use:

ul#topnav li#topnav_1 a {
		width:106px;
		background:url(images/nav.jpg) no-repeat 0 0; /* X and Y position at 0 */
}

ul#topnav  li#topnav_1 a:hover {
		background-position:0 -40px; /* Y position -40px for Over instance image */
}

ul#topnav  li#topnav_1 a.current {
		background-position:0 -80px; /* Y position -80px for Current instance image */
}

As you may see above, we defined 3 rules for the first button: #topnav_1. First rule sets the width of the link and its default background. Second rule, a:hover changes the background’s Y-position to -40px for the over state and lastly the a.current changes the background’s Y-position to -80px for the current class effect.

Now to set the rest of the buttons we will follow the same workflow, keeping in mind that each button have its own width and background X-position. A very quick easy way to get this last value is to get the previous button background X-position and its width and substract them. For example:

#topnav_2 will be: 0 ( previous button background X-position ) - 106px ( previous button width ) = -106px.

#topnav_3 will be: -106px ( previous button background X-position ) - 116px ( previous button width ) = -222px.

ul#topnav li#topnav_2 a {
    width:116px;
    background:url(nav.jpg) no-repeat -106px 0;
}

ul#topnav  li#topnav_2 a:hover {
    background-position:-106px -40px;
}

ul#topnav  li#topnav_2 a.current {
    background-position:-106px -80px;
}

ul#topnav li#topnav_3 a {
    width:122px;
    background:url(nav.jpg) no-repeat -222px 0;
}

ul#topnav  li#topnav_3 a:hover {
    background-position:-222px -40px;
}

ul#topnav  li#topnav_3 a.current {
    background-position:-222px -80px;
}

ul#topnav li#topnav_4 a {
    width:136px;
    background:url(nav.jpg) no-repeat -344px 0;
}

ul#topnav  li#topnav_4 a:hover {
    background-position:-344px -40px;
}

ul#topnav  li#topnav_4 a.current {
    background-position:-344px -80px;
}

CONCLUSION:

There you go, a quick and clean solution to create a text based navigation bar that visually looks like an image based solution with over and current animation using only XHTML, CSS and one image. I hope you find this post useful!

This technique has been tested in: IE6, IE7, Firefox ( Mac/PC ) and Safari ( Mac ).