Unique Navigation Bars Using CSS Sprites

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 10 Comments

In my previous article about CSS Sprites - Introduction, I told you about the hover effect with an example. We did mention that we would come up with more practical examples so that you realize the importance of CSS Sprites. So, we have come up with step by step instructions (including a little bit of PhotoShop tutorials) for creating a unique navigation bar based on CSS Sprites.

PHOTOSHOP TUTORIAL
To create a navigation bar that stands unique from the rest of the other blogger templates, it becomes a little mandatory that you know a little about PhotoShop. So, we will just let you know how to create one.

1. Open Adobe PhotoShop. Create a new transparent file with the dimensions you want. Most of the blogs usually have a navigation bar of width 960px and height varies between 30-50px. In this tutorial, we will be working with an example of dimension 495 x 48px.

2. Now, let your imagination run wild. Create a unique navigation bar as per your wish. Try different fonts, change pixel sizes, change the text color (or) include images next to each text. It's your navigation bar. So, have it your way. The design which I made is a simple one with icons next to each text as shown below.

3. Save this image as "Nav-01" using "File>>Save for Web..." option to obtain a .png image. This image will serve as the base image below which we will build another image for the hover effect. So, create another new file with same width as that of the initial image but double the height. In my example, I had an initial image with dimensions 495 x 48 px. The new image should be 495 x 96 px.

4. Now, open "Nav-01.png" and copy the entire image to the new file which you created. Place the image to fit the window dimensions. You will find a new layer being created that has a label "Layer 1". Have a look at the following picture for better understanding.

5. Now, duplicate that layer (Layer 1) as shown below.

6. We need to show a difference when the mouse is hovered over the link. For this very reason, place the duplicate layer below the first layer and work on the duplicate layer alone. You may show difference by changing the text color (or) have gradient effects...
7. In my case, I have just added a small box to appear above each link. So, the final outcome would be something like the one shown below.

Well, save this image as "Final-Nav-Bar.png" and upload the same to PICASA or ImageShack or any image up-loader. Obtain the URL and save it to a temporary text file!!!

"I'm sure you would have gone nuts before you got the exact look you had in your mind! Assuming that you got one, you may have a cup of coffee to relax yourself before we move the next part in the tutorial."

HTML PART
The HTML coding involved with the navigation bar is pretty simple. We make use of an unordered list with 4 list items present it. We make use of span tags in the HTML part so that, the search engines index the text along with the image rather than only the image. Well, you may extend the list to any number as you want. Make sure the text on the image and text in between the span tag matches else you will end up flagged. You may place the following piece of code anywhere in between body tags to realize the effect.

<ul id='nav-example'>
<li id='nav-example-1'>
<a href='#'><span>Home</span></a></li>
<li id='nav-example-2'>
<a href='#'><span>Advertise</span></a></li>
<li id='nav-example-3'>
<a href='#'><span>Contact</span></a></li>
<li id='nav-example-4'>
<a href='#'><span>Portfolio</span></a></li>
</ul>

Save your template once you add the above code! You may replace the '#' symbol with the links you wish to point to. It's pretty self-explanatory!

CSS PART
The CSS part will vary from person to person depending upon the image size you chose and other specifications. However, the basic layout will remain the same. You just need to vary few parameters in the coding below to match your creative work.

#nav-example {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") no-repeat;
width:495px;
height:48px;
margin:0;
padding:0;
}
#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:48px;
display:block;
}
#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-1 {width: 125px;}
#nav-example-2 {width: 122px;}
#nav-example-3 {width: 122px;}
#nav-example-4 {width: 123px;}
#nav-example-1 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") 0px -48px no-repeat; }
#nav-example-2 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") -125px -48px no-repeat; }
#nav-example-3 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") -247px -48px no-repeat; }
#nav-example-4 a:hover {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKp6bvfkjjGa3DtAccFUlfa45fqXRitCjOdIIw8QMQKI7g1ruzgKay1e3_Bgbl29-wy4yqD-Jd8W2hB-FDFs2lVSLumQlGDmmKCyOWuPTgn6IEqsptYTRTpabNko5nD-QqGcCmWFso_ct/s800/final-nav-bar.png") -369px -48px no-repeat; }

If you are blogger - blogspot user, then place the above code just before the following line. Use "CTRL+F" to search your blogger template.

]]></b:skin>

Finally, replace the link which points to my example to your image URL - the one which you temporarily saved on a text document. Just replace the code highlighted in blue with your link. Save your template!

CUSTOMIZATION
1). The very basic step in customizing the CSS part to match your navigation bar would be to change the width and the height of the bar. As mentioned earlier in the post, I worked on 495 x 48 px version while your navigation bar could be much larger or smaller. So, vary the code that is highlighted in green to match the dimensions of your navigation bar and save them.

2). Note the codes highlighted in orange. These codes specify the width of the lists in the navigation bar. In my example, the first list occupies a width of 125px while the second one occupies a width of 122px and so on... You may vary this as per your design. It's better to use the option of "Rulers" in PhotoShop to know the exact width of each item. Make the respective changes as per your design and save them!

3). The background position for the a:hover state is pretty easy to fix. The vertical position will never vary because you have to display the complete bar. So, you can simply mention the height with a negative sign prefixed to it. To find the horizontal position ( Highlighted with Rose Color), initially you start off from 0px. The next position shall be obtained by subtracting from the nav-example-01 state, that is, 0 - 125 = -125 px. Similarly for the next position, obtain it from nav-example-02, -125 - 122 = -247px. This shall be done for your entire list. That's it! Save the template and your done!

Your final output should be as shown in the following DEMO LINK - NAVIGATION BAR USING CSS SPRITES, provided you followed all the steps correctly! Just hover your mouse over the lists on the page and enjoy the effect!!! Another great example to let you know how creative your work could be - CSS Navigation Bar Example.

"If you wish to have unique navigation bars for your blog without any hassle, then reach us via Our Services page. We'll design distinct navigation bars for you and set them on your blog too!!! Why to break your head when we are there to do that:)"

I tried to keep things as simple as possible! If you find any difficulties, our comments section is always welcome. Leave a comment and clear your doubts. We'll see you in another interesting tutorial!

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• CSS Sprites, CSS Tricks, Web Design