STYLE SHEETS

Finishing a Casual Navigation Bar with CSS Sprites

If you’re interested in learning how to use CSS sprites to create engaging, standard-compliant navigational mechanisms that can be used on different web sites with minor modifications, you’ve come to the right place. Welcome to the final installment of a seven-part series that shows you how to build CSS sprite-based navigation bars. This series walks you through the progressive development of a couple of appealing links bars, which use a single background image to define the visual presentation of their sections.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 09, 2010

TABLE OF CONTENTS:

As I said in the preceding segment, I’d like to finish this article by showing how to make each section of this sample links bar "active." Achieving this requires modifying the markup of the blog’s landing page; for demonstration purposes, this will be done statically. In a real-world case, though, keep in mind that this task should be performed dynamically via a server-side language.

Having explained that, here’s an initial example that shows how to activate the “About Me” section:

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

<head>

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

body {

padding: 0;

margin: 0;

background: #452c0e;

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

color: #fff;

}

h1 {

font-size: 2.2em;

}

h2 {

font-size: 1.7em;

}

p {

margin-bottom: 15px;

}

/* main wrapper */

#wrapper {

width: 950px;

margin: 0 auto;

background: #583812;

}

/* header section */

#header {

padding: 20px;

}

/* content section */

#content {

padding: 20px;

}

/* footer section */

#footer {

padding: 20px;

}

/* navbar */

ul#navbar {

width: 950px;

height: 400px;

padding: 0;

margin: 0;

background: #965a19 url("bg_blog_navbar.jpg") top left no-repeat;

list-style: none;

position: relative;

}

/* About Me button */

ul#navbar li#about {

width: 162px;

height: 313px;

background: transparent url("bg_blog_buttons.png") 0 0 no-repeat;

position: absolute;

top: 10px;

left: 50px;

text-indent: -9999px;

}

ul#navbar li:hover#about {

background: transparent url("bg_blog_buttons.png") -160px 0 no-repeat;

}

ul#navbar li#about a.active {

display: block;

width: 162px;

height: 313px;

background: transparent url("bg_blog_buttons.png") -322px 0 no-repeat;

}

/* Articles button */

ul#navbar li#articles {

width: 162px;

height: 343px;

background: transparent url("bg_blog_buttons.png") 0 -314px no-repeat;

position: absolute;

top: 10px;

left: 220px;

text-indent: -9999px;

}

ul#navbar li:hover#articles {

background: transparent url("bg_blog_buttons.png") -161px -314px no-repeat;

}

ul#navbar li#articles a.active {

display: block;

width: 162px;

height: 343px;

background: transparent url("bg_blog_buttons.png") -322px -314px no-repeat;

}

/* Blog button */

ul#navbar li#blog {

width: 162px;

height: 300px;

background: transparent url("bg_blog_buttons.png") 0 -657px no-repeat;

position: absolute;

top: 10px;

left: 390px;

text-indent: -9999px;

}

ul#navbar li:hover#blog {

background: transparent url("bg_blog_buttons.png") -166px -657px no-repeat;

}

ul#navbar li#blog a.active {

display: block;

width: 162px;

height: 300px;

background: transparent url("bg_blog_buttons.png") -325px -657px no-repeat;

}

/* Search button */

ul#navbar li#search {

width: 162px;

height: 355px;

background: transparent url("bg_blog_buttons.png") 0 -956px no-repeat;

position: absolute;

top: 10px;

left: 560px;

text-indent: -9999px;

}

ul#navbar li:hover#search {

background: transparent url("bg_blog_buttons.png") -161px -956px no-repeat;

}

ul#navbar li#search a.active {

display: block;

width: 162px;

height: 355px;

background: transparent url("bg_blog_buttons.png") -324px -956px no-repeat;

}

/* Contact button */

ul#navbar li#contact {

width: 162px;

height: 298px;

background: transparent url("bg_blog_buttons.png") 0 -1311px no-repeat;

position: absolute;

top: 10px;

left: 730px;

text-indent: -9999px;

}

ul#navbar li:hover#contact {

background: transparent url("bg_blog_buttons.png") -162px -1311px no-repeat;

}

ul#navbar li#contact a.active {

display: block;

width: 162px;

height: 298px;

background: transparent url("bg_blog_buttons.png") -324px -1311px no-repeat;

}

</style>

</head>

<body>

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

</div>

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

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

<li id="search"><a href="#">Search</a></li>

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

</ul>

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

As seen above, activating the “About Me” section can be done simply by assigning the “active” CSS class to the corresponding link within the navigation bar. This trivial modification produces the following result when the previous web page is displayed on the browser:

In addition, the following examples show how to activate the remaining sections of the bar. Take a look at them, please:

(Active section: Articles)

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

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

<li id="search"><a href="#">Search</a></li>

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

</ul>

(Active section: Blog)

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

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

<li id="search"><a href="#">Search</a></li>

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

</ul>

(Active section: Search)

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

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

<li id="search"><a href="#" class="active">Search</a></li>

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

</ul>

(Active section: Contact)

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

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

<li id="search"><a href="#">Search</a></li>

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

</ul>

There you have it. Now that the implementation of the “active” state of each section of the previous links bar has been finished, I think that you should have a clear idea of how to use CSS sprites to build attractive web-based interface elements. This approach is extremely flexible, so if you're armed with a decent graphic editor, you’ll be able to create astounding navigation bars that will delight visitors to your website for a long time.

Final thoughts

How time flies! In the flicker of an eye, we’ve come to the end of the series. Even so, the journey has been quite instructive, as you learned how to take advantage of the functionality offered by CSS sprites to build first a stylish navigation bar, and then one with a more sketchy, artistic look.

In both cases the development process was extremely easy to follow, implying that in theory you shouldn’t have major trouble using this approach to include appealing, highly responsive links bars in your next killer websites.

See you in the next web design tutorial!

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.