Google Ajax APIs: Building a Navigation Bar with the Easing jQuery Plug-in

Simply put, Easing is a handy jQuery plug-in that allows you to extend the number of easing options that come bundled by default with the library’s “animate()” method. While its functionality is quite impressive, what really makes Easing stand out from the numerous jQuery extensions available on the web is its smooth integration with the library’s API. This feature permits programmers to add appealing animation effects to any web page element with a single method call.

To prove my point, in earlier parts of this series I demonstrated how to build a hierarchical navigation bar whose corresponding subsections were animated through some of the effects provided by Easing. Hopefully, this experience proved that it’s possible to create a dynamic user interface without compromising its accessibility. That’s not too bad, right?

While the navigation bar constructed in previous tutorials does work decently well at this time, and can be easily customized to suit more specific needs, it still needs one further improvement. With more and more resources available on cloud servers, it’d be useful to modify the behavioral layer of the bar, so that its JavaScript dependencies can be directly downloaded from the cloud, instead of having to consume the bandwidth of a local host.

Therefore in this final part of the series, I’m going to show how to accomplish this via the Google Ajax APIs. This way you’ll be able to use this sample links bar without having to install jQuery or even the Easing plug-in on your own testing web server.

Now, if you wish to learn the full details of this redesign process, go ahead and start reading!