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:

Undeniably, the best way to understand how the CSS styles defined in the previous section render the “hover” state of each section of this sample navigational bar is to include them in the web page containing the base unordered HTML list, which makes up the skeleton of the bar. In keeping with this idea, below I've coded such a web page, so you can analyze it in more detail. Here it is:

<!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;

}

ul#navbar li:hover#about {

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

}

/* Services section */

ul#navbar li#services {

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

}

ul#navbar li:hover#services {

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

}

/* Products section */

ul#navbar li#products {

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

}

ul#navbar li:hover#products {

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

}

/* Articles section */

ul#navbar li#articles {

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

}

ul#navbar li:hover#articles {

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

}

/* Blog section */

ul#navbar li#blog {

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

}

ul#navbar li:hover#blog {

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

}

/* Contact section */

ul#navbar li#contact {

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

}

ul#navbar li:hover#contact {

background: #800040 url("bg_navbar.png") -130px -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>

Mission accomplished. I don’t wan to sound too verbose here, but at this stage the visual aspect of the links bar looks much more polished, since now the “normal” and “hover” states of its sections have been properly styled.

In addition, I suggest that you look at the following screen shot, which shows what happens when the mouse is placed over the “Services” section:

Not too bad, eh? Regardless of the background image used for constructing the different sections, which can be customized at will or even replaced by another graphic, the major advantage in using CSS sprites is the absence of a visible delay when switching to their “hover” state. And speaking of customization, feel free to edit all of the code samples shown in this tutorial. Doing that should help you to utilize CSS sprites in many other creative ways.

Final thoughts

In this second part of the series, I showed you how to take advantage of CSS sprites to create the visual style corresponding to the “hover” state of each section of this sample navigation bar. From the code samples shown, it’s clear to see that this process relies heavily on manipulating the X and Y coordinates of the bar’s background image, which does requires doing some math, but nothing especially complicated.

In the next article, things will become even more interesting. I’ll be discussing how to define the “active” state of the aforementioned sections. Now that you know what to expect from the upcoming tutorial, you simply can’t miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.