Simple Animated Menu for Mootools 1.2
Very Simple and Great Animated menu using Mootool Javascript Framework.
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.
Dropdown Menu with Background Animations using jQuery
jQuery is a great library for this type of task but out of the box, it can’t animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). Grab the latest version (1.0.2 as of this writing) of the Background-Position plugin. Previous versions didn’t support negative or decimal values properly.
If you enjoy our post, feel free to subscribes to our rss feeds
