If you guys read part 1, you’ll now know exactly how to design a slick, glossy navigation for your website design. In this second tutorial, I’m going to show you how to slice your design up, create your sprites and code your navigation up using clean HTML and CSS3.
Before we look at any code, we’ll start by creating our navigation sprite. If you’re not familiar with using CSS sprites don’t fret, as I will explain how they work and also why they are a more efficient than loading separate images for each link hover.
But first, open up your .psd from last time. For the purpose of this tutorial, we’re going to create a “norma”l state and a “hover” state for our sprite. You could also create “activeâ” and “down” states but for simplicity, I’ll stick to two.
Select the navigation (in it’s entirety) and duplicate it, placing the duplicated version below the original.
The top navigation will be our”normal” state and version below will become our “hover” state.
Remove the two navigation bars. Now we’re going to tighten everything and remove any unnecessary white space from between the links. Use the Guides to get all of your links pixel perfect.
When you’re done, you should have something that looks like this:
Next, turn off the background. Crop it down and save as a .png with transparency (unlucky IE6). I’ve called it nav_sprite.png. Save out your navigation bar out separately as a transparent .png too. I’ve called mine nav_bar.png. Place these into a folder called images on your site root.
That’s pretty much it for Photoshop. Next we’ll head over to Dreamweaver (or your favourite text editor).
You’ll first of all need to set up your navigation in a <ul>.
<ul id="your_nav"> <li id="home"><a href="#" title="Home">Home</a></li> <li id="about"><a href="#" title="About">About</a></li> <li id="web_design"><a href="#" title="Web Design">Web Design</a></li> <li id="contact"><a href="#" title="Contact">Contact</a></li> </ul>
Next the CSS. The sprite works using background-position for each specific link. By placing the links tightly together as we’ve done, we can work out the exact position of each link (to the pixel) using the length of each link. So for example, our Home link is 55px by 27px. The sprites position for Home will be 0 0. The sprites position for our About link will be -55px 0 and the position of the Web Design link will be -55 the length of the About link and so on and so forth. You can see how this works in the CSS below:
ul#your_nav { width:792px; height:37px; background:url(images/nav_bar.png) no-repeat; position:relative; padding:8px 0 0 8px }
ul#your_nav li { float:left; list-style:none; margin-right:7px }
ul#your_nav li a { height:27px; display:block; text-indent:-99999px; background:url(images/nav_sprite.png) no-repeat }
ul#your_nav li#home a { background-position:0px 0px; width:55px; height:27px }
ul#your_nav li#home a:hover { background-position:0px -27px }
ul#your_nav li#about a { width:64px; background-position:-55px 0 }
ul#your_nav li#about a:hover { background-position:-55px -27px }
ul#your_nav li#web_design a { width:92px; background-position:-119px 0 }
ul#your_nav li#web_design a:hover { background-position:-119px -27px }
ul#your_nav li#contact a { width:73px; background-position:-211px 0 }
ul#your_nav li#contact a:hover { background-position:-211px -27px }
Our hovers will have a negative value in the Y axis. The height of each nav link is 27px so our hover position for each link will be -27px. The text-indent positions the text off the screen. This allows search engines such as see our navigation as real text (in the source) and index our pages. The reason that this method is more efficient than using separate background images for each link; is primarily the faster loading times and fewer http requests. One background image equals one http request whereas multiple images will require several and thus slow page-loading times.
That’s pretty much it for creating a navigation for your web design. Check out the demo and download the entire source files (attached). This navigation could be further enhanced using jQuery to animate a fade on hover.