Simple Animated Menu for Mootools 1.2

Oct

Simple Animated Menu for Mootools 1.2

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.

See a demo here

Written by: Mark Dijkstra

Mark Dijkstra is the founder and main writer of OpenSourceHunter. He's also a passionate freelance web developer and designer. Mark is one of those people that spend too much time on the internet to keep up with all of the trends and tools.
You can follow Mark on twitter @ MarkDijkstra

Keep reading with more great articles!

40 JavaScript lightbox scripts(included jQuery and MooTools)

A collection of cool Mootools plugins

Collection of MooTools menu plugins

More Categories

No Comments

As you can see there are no comments, so write the first one!

Add Your Comment

Your name

September 9, 2010

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!