This tutorial will show the ease of making a CSS Image Sprite Navigation using a <ul>. It is by no means the only way of going about it, but I have found that this is the most efficient.
The first step is to make your navigation image. The best way to do this is to make your image in photoshop and double the width ( or height if you are going to be creating a horizontal navigation ), and paste the exact same thing in the space you created, then make your changes for the hover. It should look something like this. This makes for a quicker load time than if you made every image separately, due to the fact your computer only has to make one request to the server verses multiple images, and alot less CSS needed. Read the rest of this entry »
