{e} house studio

CSS Sprite Navigation Tutorial


Code 

Bob Galmarini on June 27, 2008

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.


HOW DOES SPRITING HELP?
Sprite images takes the many images of a navigation and pushes them all into one larger image. Although the larger image may be significantly bigger than the individual buttons, you can usually save some size from all of the images added together. More importantly however, is the fact that the server only has to load one image to view your site navigation. This can greatly minimize server connections and can take seconds off of your load time. This technology has saved companies like apple and yahoo thousands of dollars a month on server requests.

1) GETTING STARTED IN PHOTOSHOP
I have started by designing my navigation in photoshop, slicing up my images and then combining my slices. Each button looks like this:

2) WHIP-UP SOME HTML
After collecting all of my images I dive into writing some simple html for the navigation. Here is what it looks like.

 

Putting your navigation in a ul list helps organize your navigation and makes it much easier to change and edit through css. Each button has been given a class which is easily defined and easy to edit in the css file. To set a button to active you simply add _a to the class name. Have a look at my services button as an example. Now lets take a look at the meat of the navigation… the css.

 

3) STIR A LITTLE CSS INTO THE MIX Each button has a style for it’s 3 different states. Here is what the about button looks like:

 

a.navAbout, a.navAbout_a {
	display:block;
	float:left;
	width:148px;
	height:58px;
	background: url(”../images/about_button.jpg);
}
 
a.navAbout:hover {
	background: url(”../images/about_button.jpg) 0 116px;
}
 
a.navAbout_a {
	background: url(”../images/about_button.jpg) 0 58px;
}

The first navAbout defines what the button will look like. This defines the width and height of the button and the background image.
The hover state uses the same width and height, but shifts the x and y coordinates of the background image to reveal the rollover state of that sprite. The same goes for the active state of the image.
The css is a little more complex, but still fairly easy to follow. Have a look and good luck. Feel free to use this navigation anywhere you like, and if you think of it post a comment or shoot us an email letting us know.

SOMETHING IS UP WITH THE iPhone
Although spriting images is a great way to go and works really well, there is an issue that we notice that we can’t seem to get rid of. On the iPhone the active state seems to be 1 pixel off. We even noticed this on Apple’s own website. So if anyone out there has a fix for this, please share it in a comment below.

ONE STEP FURTHER
This tutorial uses seperate sprited images for each button of the navigation. You can also accomplish the same effect by going a step further and combining all of the button sprites.