Easing jQuery Plug-in: Using the easeOutBack Effect to Build a Navigation Bar

As you’ll surely know, there are literally dozens of ways to build an animated navigation bar. If you’re not too pretentious and want to keep things rather uncluttered, a simple combination of nested HTML lists and CSS will do the trick quite decently, especially now that CSS-based rollovers are used nearly everywhere. However, if you need to implement more engaging animations, sooner or later you’ll have to appeal to the functionality of JavaScript, or even to what an abstraction library like jQuery can provide.

In a case like this, things can become more complex, since the implementation of a JavaScript-based links bar often seriously compromises its accessibility -- a major sin in the terrain of modern web design. Fortunately, not all is lost when it comes to building animated yet accessible navigation bars. It's possible to get the best of both worlds without going through a painful experience. As the title of this article suggests, there’s a handy jQuery plug-in called Easing, which will let you animate different web page elements, including your carefully-crafted navigational bars, with a minimal effort -- and best of all, without sacrificing their accessibility.

Naturally, if you've already read the tutorials previous to this one, it’s probable that you’re familiar with building an animated links bar using Easing. In those earlier articles I discussed in a step-by-step fashion how to accomplish this. I left off the last installment explaining how to create an interesting variation of the bar by using the “easeOutElastic” effect included with the plug-in, which was admittedly a no-brainer process.

It’s fair to clarify, though, that Easing comes packaged with a few additional eye-catching effects that are worth looking at. In keeping with this idea, in this penultimate part of the series, I’m going to show how to apply the plug-in’s “easeOutBack” animation to the navigation bar developed in the previous article.

Want to learn how this will be carried out? Then jump ahead and begin reading!