In this first part of a two-part series, you will learn how to create animated navigation bars using some simple HTML, sprites, and the CSS3 (cascading style sheets) background-position property.
Backed up by a long existence, the “background-position” property looks like any other building block of the CSS specification. In many situations, however, first impressions tend to be a little bit tricky and misleading, and that’s exactly the case with this property. While its primary functionality is to position a given background image within an HTML element according to the specified X, Y coordinates (or generic values like left, right), it’s possible to use it in a more clever way and get quite impressive results, especially when building graphical user interfaces (GUIs).
The most glaring example where the property shines in all its splendor is during the construction of navigation bars, where the implementation of engaging mouse over effects is achieved thanks to the use of CSS sprites, a common technique that bases its functionality on showing portions of one or multiple background images by altering their X, Y values via the property in question.
While the bunch of hovering effects that can be accomplished with CSS sprites are quite remarkable, it’s possible to take them to the next level with jQuery. You may be wondering how this can be done. Well, since the library’s “animate()” method permits you to animate different properties of a web page element, it’s really simple to use this approach with its background position, in this way allowing you to create animated CSS sprites.
In this two-part tutorial I’ll be using the aforementioned technique in the development of a dynamic - yet semantic - navigational bar, which you’ll be able to tweak and customize with minor efforts.
Taking the first step: defining the navigation bar’s markup
Before you get into the details concerning the implementation of the animated navigation bar discussed in the introduction, first be sure to download the supporting files here, so that you can take a deeper look at them and grab the background image that I’ll be using later on.
The first step that must be taken is to define the navigation bar’s skeleton. As usual, this will be done by wrapping a group of links inside a plain unordered list. The following code fragment does this in a simple fashion:
<ul id="navbar">
<li id="about"><a href="#" title="About Us">About Us</a></li>
<li id="services"><a href="#" title="Services">Services</a></li>
<li id="products"><a href="#" title="Products">Products</a></li>
<li id="contact"><a href="#" title="Contact us">Contact</a></li>
</ul>
There’s not much that can be said about the previous markup, as its structure is self-explanatory. In this case, and for demonstrative purposes, I decided to create a navigation bar composed of a few typical sections, such as “About Us”, “Services”, “Products” and so forth.
So far, so good. Now that the navbar is seated upon a clean and semantic structure, it’s time to make its sections look a bit more appealing with CSS. This will be accomplished in the following segment.
As explained in the preceding segment, it’s necessary to decorate the markup of this sample navigation bar with some straightforward styles. In keeping with this requirement, below I defined a basic CSS file, which performs this task in a few easy steps. Check it out:
(css/styles.css)
body {
padding: 0;
margin: 0;
background-color: #1577a4;
font: normal 0.9em Arial, Helvetica, sans-serif;
color: #000;
}
h2 {
margin: 0 0 10px 0;
font-size: 2em;
color: #1592cc;
}
p {
margin: 0 0 15px 0;
line-height: 1.3em;
}
/* main wrapper */
#wrapper {
width: 800px;
margin: 0 auto;
background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
padding: 20px;
}
/* navigation bar */
ul#navbar {
list-style: none;
width: 652px;
padding: 0;
margin: 0 auto;
overflow: auto;
}
/* list items in navigation bar */
ul#navbar li {
float: left;
width: 162px;
height: 57px;
margin-right: 1px;
background: transparent url("../images/sprite_horizontal.png") no-repeat;
}
/* anchors in navigation bar */
ul#navbar li a {
display: block;
width: 162px;
height: 57px;
text-indent: -9999px;
}
/* 'About Us' button */
ul#navbar li#about {
background-position: 0 0;
}
/* 'Services' button */
ul#navbar li#services {
background-position: -162px 0;
}
/* 'Products' button */
ul#navbar li#products {
background-position: -324px 0;
}
/* 'Contact' button */
ul#navbar li#contact {
background-position: -486px 0;
}
Asides from creating the visual presentation of some heading elements and paragraphs, (a process that doesn’t bear any further discussion, by the way), the above file is responsible for defining the appearance of each button of the navigation bar. As you can see, this has been achieved by using a single background image (or in other terms, with a single CSS sprite), thanks to the use of the “background-position” property.
If you already grabbed the background image included with the supporting material, and tested the navbar in its current state, it should look similar to this:
Not too bad, right? However, the behavior of the bar still does nothing really catchy, as at this moment it is simply a static structure composed of a few graphical buttons and nothing else. Well, it’s time to make things a bit more interesting and make those buttons truly dynamic with jQuery!
Animating the navigation bar’s buttons: using the Background-Position jQuery plug-in
There’re many approaches that can be used for building a navigation bar that has some form of dynamic behavior. As noted at the start of this article though, my goal here is to demonstrate how to create an appealing mouse over effect by animating the buttons that you saw in the prior segment.
To do so, I’m going to implement a solution similar to the one shown by Jonathan Snook here (http://snook.ca/archives/javascript/jquery-bg-image-animations/), which uses the Background-Position plug-in (http://plugins.jquery.com/files/backgroundPosition_1.zip) to overcome a well-known issue of jQuery when it comes to altering the background position of an element in a cross-browser fashion.
With that being explained, here’s my approach for turning the previous buttons into dynamic ones:
(js/buttons.js)
$(document).ready(function() {
// animate the 'About Us' button
$("#about").hover(
function() {
$(this).stop().animate({backgroundPosition: "(0 -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(0 0)"}, {duration: 300});
}
);
// animate the 'Services' button
$("#services").hover(
function() {
$(this).stop().animate({backgroundPosition: "(-162px -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(-162px 0)"}, {duration: 300});
}
);
// animate the 'Products' button
$("#products").hover(
function() {
$(this).stop().animate({backgroundPosition: "(-324px -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(-324px 0)"}, {duration: 300});
}
);
// animate the 'Contact Us' button
$("#contact").hover(
function() {
$(this).stop().animate({backgroundPosition: "(-486px -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(-486px 0)"}, {duration: 300});
}
);
});
If you’re familiar with the inner workings of the “animate()” jQuery method, the above code bit should be pretty easy to follow. Simply put, all that it does is use the method in question for vertically animating the “background-position” property of each button of the navigation bar. In addition, you should notice that the pertaining property is invoked as “backgroundPosition”, as the aforementioned plug-in requires this notation to do its business. So, make sure to stick with this syntax and everything should work just fine.
You should have already grasped the driving logic of the previous script. Given that, the next logical step that must be taken is to show the navigation bar’s full source code, so that you can test it and add to it your own improvements:
First off, here’s (X)HTML document containing the bar’s markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic navigation bar using the 'background-position' CSS property</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>Header 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. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
<ul id="navbar">
<li id="about"><a href="#" title="About Us">About Us</a></li>
<li id="services"><a href="#" title="Services">Services</a></li>
<li id="products"><a href="#" title="Products">Products</a></li>
<li id="contact"><a href="#" title="Contact us">Contact</a></li>
</ul>
<div id="main">
<h2>Main 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. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
<div id="footer">
<h2>Footer 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. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
<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. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</div>
</body>
</html>
Done. Now, it’s time to list the CSS file that creates the corresponding buttons. Here it is:
(css/styles.css)
body {
padding: 0;
margin: 0;
background-color: #1577a4;
font: normal 0.9em Arial, Helvetica, sans-serif;
color: #000;
}
h2 {
margin: 0 0 10px 0;
font-size: 2em;
color: #1592cc;
}
p {
margin: 0 0 15px 0;
line-height: 1.3em;
}
/* main wrapper */
#wrapper {
width: 800px;
margin: 0 auto;
background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
padding: 20px;
}
/* navigation bar */
ul#navbar {
list-style: none;
width: 652px;
padding: 0;
margin: 0 auto;
overflow: auto;
}
/* list items in navigation bar */
ul#navbar li {
float: left;
width: 162px;
height: 57px;
margin-right: 1px;
background: transparent url("../images/sprite_horizontal.png") no-repeat;
}
/* anchors in navigation bar */
ul#navbar li a {
display: block;
width: 162px;
height: 57px;
text-indent: -9999px;
}
/* 'About Us' button */
ul#navbar li#about {
background-position: 0 0;
}
/* 'Services' button */
ul#navbar li#services {
background-position: -162px 0;
}
/* 'Products' button */
ul#navbar li#products {
background-position: -324px 0;
}
/* 'Contact' button */
ul#navbar li#contact {
background-position: -486px 0;
}
And last, but not least, here’s the script that animates the buttons’ background position when hovering on them:
(js/buttons.js)
$(document).ready(function() {
// animate the 'About Us' button
$("#about").hover(
function() {
$(this).stop().animate({backgroundPosition: "(0 -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(0 0)"}, {duration: 300});
}
);
// animate the 'Services' button
$("#services").hover(
function() {
$(this).stop().animate({backgroundPosition: "(-162px -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(-162px 0)"}, {duration: 300});
}
);
// animate the 'Products' button
$("#products").hover(
function() {
$(this).stop().animate({backgroundPosition: "(-324px -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(-324px 0)"}, {duration: 300});
}
);
// animate the 'Contact Us' button
$("#contact").hover(
function() {
$(this).stop().animate({backgroundPosition: "(-486px -57px)"}, {duration: 300});
},
function() {
$(this).stop().animate({backgroundPosition: "(-486px 0)"}, {duration: 300});
}
);
});
Mission accomplished, at least for the moment. Now, armed with the code samples just shown, go ahead and give the navigation bar a try using your own browser (again, make sure to download the Background-Position plug-in, in order to avoid unexpected and unpleasant surprises). If all works as intended, when hovering on each button, the process should trigger an animation similar to this one: 
There you have it. Even when the last thing that would come to our minds would be to use the “background-position” property to create animated buttons, now that you know that the process is indeed fairly simple to master, and even simpler to implement. So, go ahead and start out building your own animated navigation bar. You’ll have a great time doing it!
Final thoughts
Over this introductory article, you learned how to build an engaging navigation bar, whose buttons were properly animated thanks to the clever use of the “background-position” CSS property and a few straightforward jQuery methods. What’s more, in the previous example, the buttons were displaced vertically, which is all well and fine.
It’s possible, though, to create an eye-catching horizontal animation with the same ease; however, the fine details of this process will be discussed in the final installment of this tutorial.
Don’t miss the last part!