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:

As usual, before I start coding the CSS styles required to define the look of the blog’s navigational bar when users hover on it, I"m going to reintroduce the source code developed so far. The code shows how to take advantage of the functionality offered by CSS sprites to style the bar in its normal state.

Having said that, here’s the background image used to create the CSS sprites that give the bar its sketchy look:

Unquestionably, the above picture demonstrates in a nutshell the driving logic of CSS sprites, since it behaves as a container for all the states of this sample links bar. Do you see the point to using this approach? Great! Now look at the following code fragment, which renders the bar in its normal mode:

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

}

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

}

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

}

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

}

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

}

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

Here, it’s clear to see how the simple manipulation of the X and Y coordinates corresponding to the previous background image permits you to define the initial appearance of the blog’s navigation bar. Of course, the beauty of using this approach is that the entire styling process demands only a single HTTP request to the web server. That’s faster and better, right?

In addition, the following screen capture shows how this sample links bar is displayed on screen when the earlier web page is rendered by the browser:

Well, having created the CSS code responsible for defining the “normal” state of the bar, the next thing that we must do is add the styles that will define the “hover” mode of its sections.

This topic will be discussed in depth in the segment to come. So please click on the link below and keep reading.

Next: Defining the navigation bar's hover state >>