Home arrow JavaScript arrow jQuery Easing Plug-in: Building an Animated Navigation Bar

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
August 02, 2010
  1. · jQuery Easing Plug-in: Building an Animated Navigation Bar
  2. · Defining the navigation barís structural markup
  3. · Defining the navigation barís visual presentation
  4. · Linking the CSS styles to the navigation bar's markup

print this article

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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials