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.
Comments
Abhilash posted at 11:07 pm on November 21st, 2009
Hi bob,
This tutorial is nice but it seems like some sort of bug in the page. Both the demo and download buttons are not working and the code seems to be confusing. If you can correct this, the page will be a lot usefull to all the webbers out there. Thnx.
Diseño Web posted at 11:07 pm on November 25th, 2009
Very useful this tutorial.
ray posted at 11:07 pm on December 1st, 2009
thanks, so good. my web [ul]batteries-mart.co.ukhttp://www.batteries-mart.co.uk[/ul]. it’s navigation is poor.
Design Club7 posted at 11:07 pm on December 3rd, 2009
Nice resource for Web Developers.
Bob Galmarini posted at 11:07 pm on December 7th, 2009
Hey guys,
Thanks for the heads up on the broken links. We have recently changed platforms for our blog and it looks like we have a few links that didn’t make it over. We will get those fixed for you all in a jiffy and be back up and running in no time.
Thanks again and check back soon.
Cheers,
Bob
Bob Galmarini posted at 11:07 pm on December 9th, 2009
The demo and download links are fixed. Thanks for your patience.
Cheers,
Bob
Diseño Web posted at 11:07 pm on December 10th, 2009
Thanks for repair the links for dowloading.
Jennifer posted at 11:07 pm on January 12th, 2010
Hi Bob,
Thanks for this really detailed explanation and source codes. That is very helpful. I have three questions:
1. When I research the css sprites, I saw another tutorial that use another technique, which use one image only. The tutorials are here:
http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/
and
http://webdesign.about.com/od/advancedcss/ss/css_sprites_buttons.htm
I saw you have five images for the sprites (excluding right and left) for each button.
What is pro and cons of using the way you did and using one image only - in terms of loading speed, look, and browser compatibility?
2. SEO: in your source code, you did not put text name and span tag on it. Do you think it would be good that we add text and span tag so that search engine find our page? When I look at the source code of your this page, I do see span tag (although I know you use ‘text’ instead of ‘image’ on navigatin)
3. Other than compare 6 images versus 1 image, what do you think of the pros and cons of using text on image (just like the way you did on this page’s navigation) and using image only on navigation (just like this illustration)? I know that is another css sprites way of doing it. I really prefer text. In your this web navigation, you use arial and bold and smooth. It will not look too bad in IE 6 when smooth effect is lost. However, we are going to use verdana and smooth without bold. So it is going to look bad in IE 6. We are going to create navigation similar to small business online community at bank of america.
Wrexareerment posted at 11:07 pm on February 2nd, 2010
prescriptions drugs online physicians http://fnfarmy.lupefiasco.com/profiles/blogs/lotrimin-without-a-prior
<a >chemotherpy drugs</a> zocor online pharmacy <a >detrol</a>
stokes county north carolina drug busts http://my.photofinishrecords.com/profiles/blogs/glucotrol-without-a-prior
<a >newspaper articles about drugs</a> definitive illegal drug pricing by city <a >motrin</a>
cheapest cialis pharnacy comparison http://www.trapmuzik.com/profiles/blogs/tenormin-without-a-prior
<a >keywords cialis levitra sales viagra</a> quin snyder drug <a >glucosamine</a> what is drug reminyl used for <a >rosiglitazone</a>
Lee Star posted at 11:07 pm on February 5th, 2010
I found this very helpful as i didn’t or couldnt rather use the one img eg that jennifer as put forward. The colours on my site flow into the nav making it nesasary to need unique img every time. good job thanks for the lesson.
Ken Davenport posted at 11:07 pm on February 11th, 2010
Thank you very much for this tutorial.
Leave a Comment