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.

Final Demo

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

Final Demo

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles