STYLE SHEETS

Defining a Navigation Bar`s Hover State with CSS Sprites

In this penultimate part of the series, I show how to use the previous CSS sprite background image to define the look of a casual, artistic blog navigation bar in its “hover” state. The simple styling process shouldn't give you any major problems when you use this approach to build a navigation bar for your own websites.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 08, 2010

TABLE OF CONTENTS:

By far, the best way to understand the role that CSS sprites play in the construction of this sample navigation bar is by examining the full source code of the web page that displays its “normal” and “hover” modes. With that premise in mind, below you'll find the XHTML document that renders the bar with the two aforementioned modes up and running. 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>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 above, the CSS code responsible for visually defining the two main states of the links bar is very easy to follow, so I won’t spend your time (and mine) explaining once again how it works. Instead, I suggest you do something a bit more useful and look at the following image, which depicts the appearance of the bar when the mouse is placed over its “Articles” section:

In this case, the hovered section simply changes the color of its icon, but naturally it’s possible to create a different hovering effect, depending on your particular needs and preferences. The possibilities are endless.

And with this last example, we’ve come to the end of this sixth installment of the series. As usual, feel free to edit all of the code samples shown in this tutorial to give yourself a better understanding of how to work with CSS sprites in all sorts of creative ways.

Final thoughts

In this penultimate chapter of the series, I showed how to employ the previous CSS sprite background image for defining the look of this sketchy navigation bar in its “hover” state. The entire styling process was indeed a no-brainer, so I guess you won't have major problems using this approach when building your own websites.

In the last part of the series, I’ll be discussing how to use the same background graphic that you saw before for creating the “active” mode of the bar’s sections.

Don’t miss the final chapter!

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.