STYLE SHEETS

Building CSS Sprite-Based Navigation Bars

In this first part of a series, we'll start building a stylish navigation bar which uses a combination of image replacement and CSS sprites to define the visual presentation of its sections. The resulting bar will have a clean, professional look that would be at home on any corporate web site.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

February 26, 2010

TABLE OF CONTENTS:

As I said in the segment that you just read, the last thing that remains undone, at least for the moment, is tying the set of CSS styles defined before to the corresponding markup of a web page. Based on this idea, below I listed for you the source code of this page, which will let you test the navigational bar in its "normal" state. 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;

}

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

Provided that you've already downloaded the CSS sprite image containing the different sections of the navigation bar, if you create a file using the previous code fragment, you should be confronted with the following output, in this case cropped and reduced for editing purposes:

In addition, you may want to download this supporting file:

http://images.devshed.com/da/stories/sample_navbar.zip

which contains a fully-functional version of the navigational bar, naturally with each of its sections already styled and ready to be used.

Final thoughts

In this introductory chapter of the series, I started building a stylish navigation bar, which uses a combination of image replacement and CSS sprites to define the visual presentation of its sections. Even though it's fair to say that in its current incarnation the navigational interface is completely functional, there are still some pieces of it that need to be constructed, including the "hover" and "active" states of its elements.

Fortunately, the wait won't be long; in the upcoming tutorial I'll be defining the CSS styles that will put the aforementioned "hover" state of the navigational bar into action.

Don't miss the part 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.