mooforum

Posted: **Tue Dec 29, 2009 11:21 pm**

Can some one convert Simple Animated Menu for Mootools 1.2 to work with Mootools 1.1 please?
The menu is from this website http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/

Below is the js code:

Line number On/Off | Expand/Contract | Select all

 
//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 !!

Posted: **Wed Dec 30, 2009 5:25 am**

try changing Fx.Tween to Fx.Style first, then tell me if it throws errors still.

Posted: **Wed Dec 30, 2009 5:26 pm**

I changed the Fx.Tween to Fx.Style and the js error that I'm getting now is overflown.each is not a function.
Attached is the menu source with motools1.2.js + included motools.1.1.js that i need to make to work with
and the changes that i made.

Thank you.

mooforum

Simple Animated Menu from Mootools 1.2 to Mootools 1.1

Simple Animated Menu from Mootools 1.2 to Mootools 1.1

Re: Simple Animated Menu from Mootools 1.2 to Mootools 1.1

Re: Simple Animated Menu from Mootools 1.2 to Mootools 1.1