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 I explained in the preceding section, the last thing that must be done to finish building this CSS sprite-based links bar is to modify its markup, so it can indicate visually to users what section they’re currently visiting. Fortunately, this seemingly complex task is performed simply by assigning the “active” CSS class defined before to the link corresponding to the section being viewed.

The code fragment below represents a scenario where the active section is the one labeled “About Us.” Take a look at it:

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

}

ul#navbar li#about a.active {

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

}

ul#navbar li#services a.active {

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

}

ul#navbar li#products a.active {

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

}

ul#navbar li#articles a.active {

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

}

ul#navbar li#blog a.active {

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

}

ul#navbar li#contact a.active {

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

See how easy it is to inform users of which section they’re currently visualizing? I bet you do. However, if this process still seems obscure to you, the following screen capture should shed some light on it:

This picture shows the “About Us” section as the active one, but the others can also be active too, right? Well, to recreate this, here’s a final code sample that shows how the markup of the navigation bar should be amended to reflect these cases:

(Active section: Services)

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

<li id="services"><a href="#" class="active">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>

(Active section: Products)

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

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

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

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

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

</ul>

(Active section: Articles)

<li id="about"><a href="#">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="#" class="active">Articles</a></li>

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

</ul>

(Active section: Blog)

<li id="about"><a href="#">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>

(Active section: Contact)

<li id="about"><a href="#">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="#" class="active">Contact</a></li>

</ul>

That was simple to read, wasn’t it? Of course, hard-coding each possible active section is pointless; at the risk of being repetitive, this task should usually be performed via a server-side language. Hopefully, this last example gives you a clear idea of how to use the functionality of CSS sprites for building highly-responsive navigational bars.

Now, leverage your creativity and start using this approach to develop your own killer user interfaces!

Final thoughts

That’s all for the moment. In this third part of the series, I gave the final touches to this 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. As you saw for yourself, constructing a graphic user interface like this is a two-steps process that requires first creating a good-looking background image, and then tweaking its X and Y coordinates via CSS. That’s all you need to do, really.

Considering the flexibility offered by CSS sprites, in the upcoming part I’ll be showing how to use them for building a more “artistic” navigation bar, fully loaded with a neat set of professional icons, cast shadows and a few other appealing effects.

Here’s my advice: don’t miss the tutorial to come!

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.