If you think that you already knew all about the “background-position” CSS property, or that its functionality was limited to statically positioning background images within web page elements, you should check out this tutorial. In an approachable fashion, you’ll learn how to construct an animated navigation bar by using the property in question along with a few straighforward jQuery methods.

In the first installment of this two-parter (CSS Animated Navbars), I developed an introductory example, which demonstrated how to couple the “background-position” property to jQuery’s "animate()” method, in order to build up our navigation bar. Thanks to the versatility offered by the pertaining method, it was really easy to vertically animate the bar’s buttons, creating an eye-catching mouse over effect, quite different from the ones that can be implemented with plain CSS.

Being the library’s workhorse - at least when it comes to animating different properties of an HTML element - the “animate()”method can be used in all sorts of clever ways. In this final episode of our two-part tutorial I’ll be showing you another approachble example - how to use the method, but this time for horizontally animating the elements of the earlier navigation bar.

Getting a Bit More Creative: Implementing a Variation of the Original Navigation Bar

As noted in the introduction, it’s fairly easy to tweak the behavior of the navigation bar created before, so that its buttons can be horizontally animated with jQuery. But before we come to that point, first it’s let's define the bar’s base structure.

In this particular case, I’ll be following a typical approach, since the bar’s skeleton will be seated on top of an unordered list. The following web page accomplishes this in a snap. Check it out:

If you had the chance to take a peek at the preceding tutorial, the above code fragment should be familiar to you, as the markup of the navigation bar is composed of the aforementioned unordered list, which has been used as a wrapper for the corresponding links.

With this simple – yet clean structure up and running already, the next logical step is to spice up its visual presentation with some straightforward CSS styles.

Polishing the Navbar’s Appearance: Defining a Simple CSS File

Providing the navigation bar look with a more appealing appearance is as simple as styling its links and the wrapping unordered list. In this case there’s a little catch: since the purpose here is to horizontally animate the, it’s necessary to use a different CSS sprite that permits us to implement this effect.

To better understand how this brand new sprite will be used in the creation of this animation, be sure to download the navigation bar’s supporting files here.

Having clarified that, take a look at the following CSS file, which performs the styling process:

The above CSS styles are extremely easy to follow. Aside from defining the appearance of the H2 elements and paragraphs of the corresponding (X)HTML document (plus a few containers), they’re responsible for styling each button of the navigation bar, namely its “About Us”, “Services”, “Products” and “Contact” sections.

Here, it’s clear to see that this process is achieved by changing the X,Y coordinates of the provided CSS sprite, so if you haven’t done so already, go ahead and download the supporting material right away.

So far, so good. If at this point you test the navigation bar in its current state, it should look similar to this:

Admittedly, its appearance is quite appealing, but also pretty boring as well, as its buttons are simply static elements. Well, it’s time to fix this issue and to bring them to life with jQuery!