jQuery Easing Plug-in: Building an Animated Navigation Bar

While the concept has been admittedly the subject of strong controversy in the past, nowadays very few people will disagree with the idea that the most important part of a website is its content. This implicitly means that a site’s navigational bar is its most crucial interactive element. Its function (at least in theory) is to provide users with a mechanism that permits them to access that content in a quick and simple manner.

Given the relevant role that navigation bars have during the construction of web-based user interfaces, over time these elements have gone through a steady process of evolution. It's possible nowadays to see them everywhere in all sorts of forms and flavors, ranging from the nifty and classic to fully-loaded with tons of animation effects, most of the time implemented in Flash.

It’s fair to note, however, that developing an animated links bar isn’t a painless experience. The process always requires an adequate balance between the definition of the bar’s bare bones structure, its visual presentation and its dynamic behavior. This is hard to achieve without compromising its accessibility at some point.

In summary, does this mean that creating an animated and accessible navigation bar is a lost cause? Actually, it isn't. To demonstrate this, in the course of this set of tutorials I’m going to build a links bar whose structure will be defined by way of a few nested lists, and its comprising sections will be animated using the handy Easing jQuery plug-in. The most interesting aspect of this sample bar, however, will be its ability to remain entirely functional thanks to the use of Progressive Enhancement. PE is an approach that I discussed in depth in a previous series, published here at the Developer Shed network.