Here is the follow up tutorial to my most recent tutorial on how to create Apple’s navigation bar in photoshop. This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.
What are CSS Sprites, and why use them?
In lamens terms CSS Sprites are multiple images combined into one to reduce the amount http requests and server load time. Have you ever used the hover attribute with a background image that shows up on hover? Yep that’s right, when you hover over it for the first time there is a slight flicker, or moment where the image does not show. This happens because the browser doesn’t load that image until the hover state, therefore causing a slight flicker the first time the image is hovered over. CSS Sprites get rid of that flicker because instead of using two images and calling a separate image on hover you combine the two images into one and position it on hover. This might sound a little confusing at first, but keep doing it and you will get it.
Ok, Lets Get Started
1. Click here to download our starting image for this tutorial
2. Create a new HTML file and a CSS file with your favorite editor.
Setting up the HTML
We are going to use an unordered list because they are great especially for navigation. So create an unordered list like the one below. You can see that we have an LI tag for each section on our navigation, this is very important. You can also see that each LI tag has an ID assigned to it. This is also very important because we will need to specify the width of each list item later.
<ul id="nav"> <li id="list1"><a href="#"><span>Apple</span></a></li> <li id="list2"><a href="#"><span>Store</span></a></li> <li id="list3"><a href="#"><span>Mac</span></a></li> <li id="list4"><a href="#"><span>iPod + iTunes</span></a></li> <li id="list5"><a href="#"><span>iPhone</span></a></li> <li id="list6"><a href="#"><span>Downloads</span></a></li> <li id="list7"><a href="#"><span>Support</span></a></li> </ul>
That is all of the HTML code you will need for this technique, CSS takes care of the rest.
Setting up the CSS
Ok first and foremost I am hoping you have already linked your style sheet to your HTML file, if not do so now.
3. The first selector we will be working with is our Unordered list which we gave the ID of “nav.” We are going to set our main image as the background of our unordered list. Now, our images total height is 76px, but we only want half of the image to show at first correct? Yes thats correct, because we do not want the bottom half of the picture to show up until one of the buttons on the nav is hovered over. So we are setting the height of the Unordered list to 38 which is half of 76. Margin: 0 auto is just to center the Unordered list in your browser window that piece of code is not necessary. Check out the code below
* { margin: 0px; padding: 0px; }
#nav {
background: url(nav.png);
height: 38px;
width: 876px;
margin: 0 auto;
}
#nav span {
display: none;
}
4. Next we need to get the list items to be horizontal because that is the orientation of our navigation. So we float the list items to the left so that they line up horizontally. We also want to get rid of the bullets because they are just getting in the way! The next step is to give a height to our anchor tags. The anchor tags determine which part is going to be clickable which we are giving a height of 38px. If we want all of those 38px to be clickable we have to use display: block.
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
It’s Measuring Time
5. Now we have to measure out exactly how wide each of the “buttons” on out navigation our, so lets head back to photoshop. Open up nav.png and grab your ruler tool which is underneath your eyedropper tool and click on the very left edge of the document and drag to the dark middle separator between the second button. Make sure you ZOOM IN so you can be more accurate
6. Repeat step five for each of the buttons until you get all the way to the other end. If you measure correctly they should all add up to be 876px wide. If yours do not match that width move on for now and you can change it later. Now we have to get all of our selectors ready for each individual list item.
#list1 { width: 112px; }
#list2 { width: 120px; }
#list3 { width: 128px; }
#list4 { width: 125px; }
#list5 { width: 137px; }
#list6 { width: 131px; }
#list7 { width: 123px; }
7. Now that we have the widths set we need to position the rollover on hover. So how do we do that? We are going to use background positioning. So we choose our first selector which is #list1, and we set the background image as our nav.png. When using background positioning you have two choices move along the X-axis (horizontal) or the Y-axis (Vertical). Since are rollover image is underneath our active state we need to shift the image up the Y-axis. So how much do we shift it up? Well since our image is split directly in two we can just use the same height as we set for our Unordered list which was 38px, but we need to use a NEGATIVE 38 because the negative makes it go up the Y-axis where as a positive 38 would shift it down.
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
8. The -38px for the Y-axis will be the same on each one of the list items because we always want it to shift to the rollover section of our image, but the x-axis will change. The x-axis in the example above is set to zero because it is all the way to the left. So for the next list item we need to shift it over the amount of the previous list items width (Hopefully that makes sense). So we go back and look at the width of the first list item, which we see is 112px so we add that as a negative number to our x-axis on #list2.
#list2 a:hover {
background: url(nav.png) -112px -38px no-repeat;
}
9. We keep repeating this process for the other 5 list items. Just keep adding the previous widths so by the time you get to the end you should be adding six widths together. Here is what it should look like complete.
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -112px -38px no-repeat;
}
#list3 a:hover {
background: url(nav.png) -232px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -360px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -485px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -622px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -753px -38px no-repeat;
}
All Done!!
If you have followed all of the steps I have laid out above you should have a beautiful Apple Navigation Bar coded using CSS Sprites. If you have any questions please comment on this post. Please subscribe to my blog if you enjoyed this post. Thanks everyone




September 15th, 2009 at 7:58 am
While this is a nice tutorial, you missed the :focus part of their navigation
September 15th, 2009 at 7:59 am
Ooops, i meant :active
September 15th, 2009 at 8:51 pm
I haven’t tested this myself, but just looking over your code, it appears the span tags serve no purpose. Is there a reason you included them?
September 16th, 2009 at 3:53 am
@Brandon The only reason I included it was to make it easier to update. That way when I’m inside the code I know which button is which so I can change links with out having to go look back at the actual site. Of course there not necessary but I like to include them.
September 16th, 2009 at 5:21 pm
[...] Coding and tutorial: http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/ [...]
September 18th, 2009 at 9:52 pm
I’m having a bit of trouble. When i hover over the buttons the image that is supposed to replace them is offset. It looks to be about 38 pixels to the right. I’m assuming 38px because we use that value a lot. Any ideas?
September 18th, 2009 at 9:55 pm
Never mind. I just needed to do a reset. It was a padding/margin issue. Great tutorial.
September 20th, 2009 at 5:17 pm
I seem to have a funny problem.
Everything on the buttons seemed to shifted over to the right a little bit somehow.
How do you fix it?
September 20th, 2009 at 5:19 pm
What I mean by shifted is when I hover over a button it won’t hover until what looks like 38 pixels.
But I’m not for sure.
September 21st, 2009 at 7:57 pm
Beats the heck out of having to cut up images…I love your tutorial!
September 21st, 2009 at 11:32 pm
to take it a step further how would you do it and have the image stay highlighted when you are on that particular page?
October 5th, 2009 at 4:06 pm
thanks for this tutorial…
I would also like to know how to make the image stay highlighted when on the necessary page……
Thanks again
October 9th, 2009 at 1:12 am
thanks for the tutorial. i just subscribed to your site’s rss
October 16th, 2009 at 2:36 am
Matthew Says:
September 18th, 2009 at 9:55 pm
“Never mind. I just needed to do a reset. It was a padding/margin issue. Great tutorial.”
Hey Matthew,
Could you tell me what you had to change/fix to solve your issue? I seem to be having the same problem.
Thanks
October 23rd, 2009 at 10:36 pm
Hi,
Love the tutorial but I have the same problem with the hover somebody know how to fix this?
October 24th, 2009 at 2:55 am
For those of you that are having trouble getting it to look right. Add this to the top of your CSS * { margin: 0px; padding: 0px; }
October 24th, 2009 at 4:58 am
Hi, very simple tutorial, but wisely designed. bravo
October 29th, 2009 at 9:48 am
[...] 14. Coding Apple’s Navigation Bar Using CSS Sprites [...]
November 10th, 2009 at 4:21 am
[...] the Apple navigation bar on their current website.PART TWO IS HERE LEARN HOW TO CODE THIS EXAMPLE HERE – Which will show you how to code this using the CSS Sprite technique so Stay Tuned.Here is a [...]
November 25th, 2009 at 9:07 am
Hey Shane,
I really love your tutorials! I am having a problem with the apple css spirits though. When I hover, it is slightly off to the left. I have repeatedly checked for errors but can not find any. Do you have any suggestions? Thanks again for all the your awesome tutorials!!!
November 25th, 2009 at 9:10 am
Sorry *I ment slightly of to the right.
November 25th, 2009 at 2:38 pm
@Matt S
I appreciate your support and I’m glad that you are enjoying my tutorials! I would really have to see your code in order to troubleshoot it. My first guess is that your width’s are off, but if you send it to me I’ll take a look at it.
November 25th, 2009 at 9:06 pm
Shane
Thank you so much for the fast response. Here is everything I put in css.
* { margin: 0px; padding: 0px; }
#nav{
background: url(nav.png);
height: 38px;
width: 876px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
#list1 { width: 112px; }
#list2 { width: 120px; }
#list3 { width: 128px; }
#list4 { width: 125px; }
#list5 { width: 137px; }
#list6 { width: 131px; }
#list7 { width: 123px; }
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -112px -38px no-repeat;
}
#list3 a:hover {
background: urlnav.png) -232px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -360px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -485px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -622px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -753px -38px no-repeat;
}
November 25th, 2009 at 9:51 pm
Hey Mat
I see two things.
First: Make sure that when you use 0’s to add px behind it. Like in the #nav change it to margin: 0px auto;
Secondly:
Your Code:
#list3 a:hover {
background: urlnav.png) -232px -38px no-repeat;
}
You forgot the opening parethesis on the background attribute.
Correct Code:
#list3 a:hover {
background: url(nav.png) -232px -38px no-repeat;
}
November 25th, 2009 at 11:19 pm
Shane
Thank you so much! I corrected those errors but unfortunately it did not correct the problem. I was wondering though if it could be do to other css I am currently using? I was hoping if you could view my site and see the issue first hand?
December 1st, 2009 at 1:13 pm
@Matt S
Yes it could be a CSS conflict. Make sure that you only have one declaration of each ID so that there is no interference.
December 3rd, 2009 at 6:09 pm
An excellent tutorial, thanks for posting.
Regarding the CSS directive:
* { margin: 0px; padding: 0px; }
I have found that setting padding: 0px; on #nav achieves the same effect without affecting padding elsewhere on the page.
SjH´s last blog ..Latitude XT + 128GB SSD + Windows 7 RTM
January 16th, 2010 at 11:53 am
[...] and tutorial: http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/ Share and [...]
January 29th, 2010 at 4:13 pm
Could it be posible to highlight when you are in a current page?
Thank you and nice tutorial!!
February 17th, 2010 at 10:22 pm
hey. it seems to be working fine on FF, but not on Safari? any solves?
February 22nd, 2010 at 12:28 pm
When one disables images (to simulate eg a screenreader or perhaps mobile) which i do using Firefox web developer toolbar, you see nothing at all, no links.
when you disable CSS you see a nice UL list of links.
so far i have not seen an accessible method of using sprites for links, and most methods seem to involve lots of javascript replacement techniques…. any thoughts?
(the problem being that any text appears OVER the image, and if you move or remove the text then without images / css it is not readable…)
February 28th, 2010 at 6:54 am
but you never taught us how to make the buttons in the mouseover darkened state…
here is what you need: http://www.threestyles.com/demo/nav.png
but you only taught us how to make this: http://www.threestyles.com/wp-content/uploads/2009/09/applefinalthumb1.jpg
please tell me how to make the mouseover state o the nav bar! please