This is a nice animated menu built with MooTools.

The trick of the menu is a Flashy hover effect of the arrow (or any element you want).

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.

Installation
Install mootools 1.2, then copy and paste the code before the < /head > tag in your html file, or save it as a .js and pull it in.

Download mootools 1.2, in my opinion, the best javascript library around.
Upload mootools 1.2 and link to it in the head tag (), before the end of the head tag in your html (or)
Save the code as simple_animated_menu.js (or whatever you like) and link to in the head tag (

Related Listings:

1. Simple & Nice MooTools Slideshow Plugin: Floom Floom is a MooTools slideshow plugin that can present...
2. Create a Sprited Navigation Menu Using CSS and MooTools CSS sprites are all the rage these days. And why...
3. ImageCaption – a MooTools Plugin for Auto-Captioning Images ImageCaption is a MooTools 1.2+ plugin for easily adding figure...
4. Product highlight : Mootools Believe it or not, there’s a lot of powerful interactivity...

Do you like this post?

Email: