The menu is from this website http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/
Below is the js code:
- //Simle Animated Menu for Mootools 1.2 v1
- //Released June 2008
- //Dedicated to the public domain by http://www.consideropen.com
- var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY, leftOffset) {
- var youAreHere = new Fx.Tween($(navWrap), {
- duration: 1200,
- transition: Fx.Transitions.Elastic.easeOut
- });
- $$(navElementsArray).each(function(item){
- item.addEvent('mouseenter', function() {
- var thisPos = item.getPosition(navWrap).x + item.getSize().x - leftOffset;
- youAreHere.cancel();
- youAreHere.start('background-position', thisPos + 'px ' + arrowY + 'px');
- });
- });
- var currentArrow = function() {
- youAreHere.cancel();
- var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x - leftOffset;
- youAreHere.start('background-position', activePos + 'px ' + arrowY + 'px');
- };
- //correct IE rendering problem (without this, it wont go to the active nav onload)
- var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x - leftOffset;
- $(navWrap).setStyle('background-position', activePos + 'px ' + arrowY + 'px');
- //works to set image to starting position in other browsers
- currentArrow();
- $(navWrap).addEvent('mouseleave', currentArrow);
- };
- window.addEvent('domready', function() {
- navArrowSlider(
- 'nav_wrap', // ID of nav wrap
- '#nav_wrap ul li', // Array selector of nav elements
- 'active_nav', // ID of current nav element
- '20px', // Background position y of background image
- '20' // INT ONLY - How far left from the right edge of the nav element that the image settles
- );
- });
Thank you !!
