Menu
I’m trying to finish a site my non-profit. I cannot figure out how to change the following script from using a div ID of ‘current’ to use a css class of ‘current’.
Please help me change the following to use classes.
[CODE]//Simle Animated Menu for Mootools 1.2 v1
//Released June 2008
//Dedicated to the public domain by 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(
‘navbar’, // ID of nav wrap
‘#navbar ul li’, // Array selector of nav elements
‘current’, // ID of current nav element
’86px’, // Background position y of background image
‘175’ // INT ONLY – How far left from the right edge of the nav element that the image settles
);
});