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:

Right at the beginning, I mentioned that defining the “normal” and “hover” states of this sample navigation bar was easy to grasp. However, just in case you don't recall the details, below I included the full source code corresponding to this example, complemented with the background image that gives the bar its final appearance.

Take a look at the following code fragment, please:

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

}

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

}

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

}

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

}

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

}

</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 you can see, creating the “normal” and “hover” modes of the above links bar has more to do with correctly positioning its background image than with anything else. For this particular example, the image responsible for defining the sprites corresponding to each section of the bar is the following:

And finally, here’s an additional screen shot that shows the output generated by the earlier code sample. Check it out:

Not too bad, eh? At this point, the navigation bar not only looks pretty attractive, but displays an appealing hovering effect on its sections without a single noticeable delay, thanks to the use of the previous CSS sprite graphic. However, as I said in the introduction, its behavior can be enhanced even further with the implementation of an “active” mode, which permits users to know what section is currently being visualized.

In reality, this feature has been partially implemented within the “About Me” tab, but only at the markup level. Therefore, in the next segment I’ll be defining the CSS styles that will make the “active” mode work for all of the bar’s sections.

Want to learn how this will be done? Then click on the link below and read the lines to come.

Next: Creating the active state of the links bar >>