Curious how to build something like the menu featured on this site for your next web design project? (note IE6 users – the menu is not implemented for you as your browser does not properly support png transparency, but with a solid background, it would work great). To make the menu, you won’t even have to muck about in javascript.

Simply define:

• a container for the background image
• the nav elements
• the ‘current’ nav element ID
• the animation’s horizontal track (the y coordinate of the background-image)
• the left offset of the image in relation to the nav element

Basically, you just tell the function where to put the background image you want to animate, what the buttons are and how to identify the current id, then position its x and y coordinates in relation to the elements. If you are new to javascript web development, and not sure what this all means, keep reading. It breaks down very simply.

Requirements: MooTools 1.2
License: Public Domain Certification
Demo: http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/