STYLE SHEETS

Styling the Hover State of a CSS Sprite-Based Navigation Bar

In this second part of a series, I show you how to use CSS sprites to create the visual style corresponding to the “hover” state of each section of the sample navigation bar. You will see that this process relies heavily on manipulating the X and Y coordinates of the bar’s background image. This requires doing some math, but nothing especially complicated.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

March 02, 2010

TABLE OF CONTENTS:

If you still haven't read the previous part, where I showed how to use the functionality of CSS sprites for defining the “normal” state of the navigation bar referenced in the introduction, don't worry. Below I included the source code corresponding to this particular example, naturally accompanied by the background image that makes the sprites work as expected.

Here is the background picture that defines in one go the “normal,” “hover” and “active” states of each section of the links bar. Check it out:

As you’ll realize, creating the previous image is actually the hardest part of building a stylish navigation bar (at least for me) that relies on CSS sprites to do its business. Having that picture freely available for manipulation via CSS, defining the “normal” state of the bar in question is as simple as this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Stylish navigation bar using CSS sprites</title>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

/* navbar */

ul#navbar {

width: 780px;

height: 100px;

margin: 0;

padding: 0;

list-style: none;

}

ul#navbar li {

float: left;

width: 130px;

height: 100px;

}

ul#navbar li a {

display: block;

width: 130px;

height: 100px;

text-indent: -9999px;

}

/* About section */

ul#navbar li#about {

background: #800040 url("bg_navbar.png") 0 0 no-repeat;

}

/* Services section */

ul#navbar li#services {

background: #800040 url("bg_navbar.png") 0 -100px no-repeat;

}

/* Products section */

ul#navbar li#products {

background: #800040 url("bg_navbar.png") 0 -200px no-repeat;

}

/* Articles section */

ul#navbar li#articles {

background: #800040 url("bg_navbar.png") 0 -300px no-repeat;

}

/* Blog section */

ul#navbar li#blog {

background: #800040 url("bg_navbar.png") 0 -400px no-repeat;

}

/* Contact section */

ul#navbar li#contact {

background: #800040 url("bg_navbar.png") 0 -500px no-repeat;

}

</style>

</head>

<body>

<h1>Stylish navigation bar using CSS sprites</h1>

<li id="about"><a href="#" class="active">About Us</a></li>

<li id="services"><a href="#">Services</a></li>

<li id="products"><a href="#">Products</a></li>

<li id="articles"><a href="#">Articles</a></li>

<li id="contact"><a href="#">Contact</a></li>

</ul>

</div>

<h2>Main content section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

That's definitely not rocket science, is it? As shown above, the underling structure of the links bar is nothing but a plain, unordered HTML list, which is certainly uncluttered, clean markup. However, by far the most interesting part of the previous code example rests on the CSS block that defines the visual presentation of the “normal” state corresponding to each section of the bar, as it simply manipulates the X and Y coordinates of the earlier background image to display the portion that matches a particular section.

This is basically CSS sprites 101, so please move on and look at the following screen capture, which shows the output generated by the browser after rendering the previous web page:

Well, thanks to the clever implementation of CSS sprites along with a pinch of image replacement, this sample navigation bar is starting to take the shape I wanted from the beginning. Nonetheless, there are still a few tasks that must performed, such as defining the “hover” state of its sections.

In the following section I’ll explain how to accomplish that, by once again altering the X and Y coordinates of the base background image that you saw a little while ago. Thus, if you want to learn more about this styling process, click on the link below and keep reading.

Next: Creating the hover state for each section of the navigation bar >>