Horizontal Navigation Bar Using CSS Sprites

A simple way to create a navigation bar for your website is by using unordered list. Using CSS it is pretty easy to add some nice effects to your lists to make them less boring and more user friendly. However using a few other CSS tricks, and some out of the box thinking, you can really set your navigation apart from the rest. In my last tutorial I created a Vista inspired navigation bar in photoshop. In this tutorial I will show you how to code the end result of that image into a slick looking horizontal navigation bar using CSS Sprites and HTML.

View Live Demo | Download All Files

What are Sprites??

Sprites are images that contain multiple smaller images and use CSS background position attribute, in addition to height and width, to determine what is seen (and in the case of this tutorial when it is seen).
But doesn’t a larger image mean larger file sizes and page load times??
In a nut shell, not necessarily! In many cases the overall file size of a larger image compared to the total file size of a bunch of small images could be drastically smaller. That combined with cutting back on HTTP-Requests can in theory really speed up the overall load time of a page. This can be seen in any site that you have ever visited and noticed that the fancy navigation buttons disappeared momentarily when hovering over them.

Let’s Get to Coding…

First things first, you can click here to download the image that I will be using for this example. Next open a new HTML and CSS document in your favorite editor. Be sure to make sure that your CSS page is properly attached to your HTML page.

Step 1- Build a basic list in HTML. All that we will have to do in HTML is seen here. The rest of this example will be executed with the awesomeness that is CSS.

<ul id="navBar">
<li class="home"><a href="/">HOME</a></li>
<li class="about"><a href="/">ABOUT</a></li>
<li class="contact"><a href="/">CONTACT</a></li>
<li class="services"><a href="/">SERVICES</a></li>

Step 2- Now we will start to build our CSS. Starting with the unordered List which I have given an ID of navBar.

#navBar {
	background: url(navBar_bg.png) top center no-repeat;
	height: 50px;
	margin: 0 auto;
	width: 400px;

The image is 400px so this is the width the should be defined for the list. You may notice that the height is 50px but the image actually 100px. This is so that we only see the black shiny part of the image to start. This will be better explained in a minute. Margin ;0 auto; centers the bar in the window horizontally. Padding:0; removes any padding that may be added by the browser that it is being used making sure that things line up where we expect them to.

Step 2- Remove the bullets that are shown by default next to each list item of an unordered list.

#navBar li {
	list-style: none;

If this was part of an entire website this would not effect any list items other than in this list. This literally tells the browser to remove the bullets in the list items of the lists with an ID of navBar.

Step 3- Now lets add some style to the links that are contained in the list.

#navBar li a {
	display: inline-block;
	height: 50px;
	outline: none;
	text-indent: -9999px;
	width: 100px;

By default list are vertical. The combination of the display:inline-block; and float:left; line the list items up horizontally with the top list item appearing first and the rest across the page to the right respectively. Height of 50px again so that you only see the black glossy background to start, as well as make sure that you only see blue glowing background when we hover over the link. Outline:none; removes the ugly dotted lines that appear around the edges of links by default. Text-indent: -9999px; moves the text from the links that are in the list since the text has been provided in the image that is being used. And finally width of 100px so once again to sort of cut off parts of the images that should not be seen (this is more important in the next step when we get to moving the background around). If there had been no size set to the link then there would be nothing to hover and click on after using text-indent. The sizes that were used depend in the size of the image you want to show for the next step. In this tutorial I kept things pretty simple and used a 400px list, and wanted 4 equally sized links.

Step 4- Use the CSS background position attribute to make the real magic happen.

.home a:hover {
	background: url(navBar_bg.png) 0 -50px no-repeat
.about a:hover {
	background: url(navBar_bg.png) -100px -50px no-repeat
.contact a:hover {
	background: url(navBar_bg.png) -200px -50px no-repeat
.services a:hover {
	background: url(navBar_bg.png) -300px -50px no-repeat

When setting up the list in Step 1 each list item was given a class that corresponded with the link. (ex. HOME had a class of home) Using the class of each list item combined with a:hover it is simple to declare each list item to do something different than the other list items when hovering over the link contained within. This snippet of CSS tells each link respectively to use the same image that we declared as the list background, but then moves that image up 50px showing the blue glowing image that is below. It also moves the image to the left so that we see correct part of the image within the 100px by 50px link that we declared previously (in this example they are moved in increments of 100px based on the size we declared earlier).

And it’s just that simple. If you think about it there are tons of things that you can use this technique to pull off. The best part is, it is totally cross browser compliant AND is valid XHTML 1.0 TRANSITIONAL and CSS (which is more than can be said for some techinques). Questions or comments? Drop me a line. I would be happy to help!

12 comments on “Horizontal Navigation Bar Using CSS SpritesAdd yours →

  1. Thank you Matt, you are welcome. I think that adding a drop down may be a little more than I could explain in a reply, however I will put a new post together. Check back soon!

  2. Thank you for this clear tutorial. What do you do, however, if your links are not equal width? I have a 960 pixel wide navbar with 9 links and all are different widths.

  3. Hello friend! I´m building my site right now and I was looking for the detail of ugly blue dotted box in the links! Google sent me here and my problem was solved! Excuse me for my english. It´s not my native language. Thank you very much!

  4. Hi Josh! Thank you for the explanation. I am having the same problem, however, that Leslie had. Although I can add different widths to the class for each link, the browser still reads the width that is listed under the #navBar li a (which in yours, for example, is 100px). So, the hover image is the same width every time. If I leave this width blank, nothing shows. Can you give me a tip?

    Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>