STYLE SHEETS

Defining the Active State of Menu Sections for a CSS Sprite-Based Navigation Bar

In this third part of a series, I put the final touches on our sample navigation bar, which uses the functionality of CSS sprites to define the visual presentation of the “normal,” “hover” and “active” states of its sections. Constructing a graphic user interface like this is a two-step process. First, one creates a good-looking background image, and then tweaks its X and Y coordinates via CSS.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

March 03, 2010

TABLE OF CONTENTS:

As usual, before I start coding the styles required for defining the appearance of the “active” state of the sample navigation bar's sections, I’d like to spend a few moments reintroducing the source code developed so far. It uses the functionality of CSS sprites to create the bar’s “normal” and “hover” states.

With that said, here’s the background image that performs the smooth transition between those states:

And finally, below is the web page that displays the navigational bar by using only a plain HTML unordered list:

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

Definitely, the beauty of this example rests on its capability to create a stylish navigational bar by means of uncluttered, standard markup. The cosmetic part of the whole construction process is achieved simply by altering the X and Y coordinates of the background image that you saw a moment ago. This produces the result visible in the screen shot below:

In this case, the above screen capture shows the look of the fictional “Services” section when a user places the mouse over it, but naturally the same effect will be seen when hovering on the other sections as well.

So far, so good. At this stage, the development of the navigation bar is almost complete. The only thing that remains undone is defining the visual style of its sections in the “active” state. As you might have guessed, accomplishing this only involves playing with the position of the previous background image.

However, the full details of this process will be covered in the following section. Thus, click on the link below and keep reading.

Next: Defining the visual styles for the navigation bar's active state >>