jQuery Easing Plug-in: Building an Animated Navigation Bar
When you're trying to develop a navigation bar, you need to balance two requirements. The bar needs to be accessible to as many users as possible, but many site owners and developers like the look of an animated navigation bar -- which, by its very nature, is less accessible. But if you use the Easing plug-in available in the jQuery framework, you can have your cake and eat it, too. This first part of a series on the plug-in will show you how.
jQuery Easing Plug-in: Building an Animated Navigation Bar (Page 1 of 4 )
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.