Simple Menu Fx – Mootools

Posted: July 31st, 2009 | Author: andre | Filed under: Geral, Javascript | No Comments »

Um efeito simples para menu usando o Morph do mootools v1.2.3.

Primeiro criamos o menu:

<ul id="menu">
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
</ul>
;

E um pouco de css pra ficar mais visivel:

<!--
* {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
ul#menu {
	width: 200px;
	list-style: none;
}
ul#menu li{
	border-bottom:1px solid #fdfdfd;
	height:20px;
	background:#F9F9F9;
}
ul#menu a {
	text-decoration: none;
	color: #993300;
}
-->

Em seguida o script para o menu funcionar:

window.addEvent('domready', function(){
	//Menu
	var menu  = document.getElementById('menu');
	var li = menu.getElementsByTagName('li');
	for(x=0;li.length&gt;x;x++){
		el = $(li[x]);
		el.addEvents({
			mouseenter:
			function(){
				mouseEnterFx = new Fx.Morph(this,{fps:85,unit:'px',duration: 250, transition: Fx.Transitions.linear.easeOut,link: 'cancel'});
				mouseEnterFx.start({paddingLeft:'10'});
			},
			mouseleave:
		function(){
				mouseLeaveFx = new Fx.Morph(this,{fps:85,unit:'px',duration: 250, transition: Fx.Transitions.linear.easeOut,link: 'cancel'});
				mouseLeaveFx.start({paddingLeft:0});
			}
		});
	}
});

Repare no loop “for” muito útil para atribuir o efeito a todos os elementos do menu. Neste exemplo foi utilizado o Morph para ‘trocar’ o padding da Li que contém o link do menu, fazendo com que ocorra um efeito de movimento.

Code:menu.html

Leave a Reply