Mootools 1.2を使った簡単なアニメーション化したメニュー[js]

ソースは以下です。

XHTML

<div id="nav_wrap">
<ul>
	<li id="active_nav">Tab 1</li>
	<li>Tab 2</li>
	<li>Tab 3</li>
	<li>Tab 4</li>
</ul>
</div>

CSS

#nav_wrap {
	height: 100px;
	width: 100%;
	background-image: url(/images/fancy_menu_image.png);
        padding-top: 50px;
}

JavaScript

var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY, leftOffset) {
	var youAreHere = new Fx.Tween($(navWrap), {
		duration: 1200,
		transition: Fx.Transitions.Elastic.easeOut  //adjust transition effect here
	});
 
	$$(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
	);
});

ソースのダウンロードはコチラよりできます。