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:
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.
Style Sheets 
Ten Great CSS3 Tutorials
