Simple JQuery Accordion menu

Posted: January 2nd, 2010 | Author: andre | Filed under: CSS, Javascript | No Comments »

O JQuery torna este tipo de efeito muito fácil de ser implementado. Veremos aqui como é simples.

Primeiro é necessário uma lista com sublistas internas que funcionarão como nosso menu e submenus respectivamente.

Abaixo o codigo no menu:

<ul id="menu">
	<li>
 <a href="#">Empresa</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li><a href="#">Conteúdo</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li><a href="#">Conteúdo 2</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li>
 <a href="#">Informativo</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>

Em seguida, obviamente usaremos o CSS pra dar um look agradável para o menu. Repare que diferentemente do usual display:none que geralmente é utilizado em submenus, aqui não é necessário devido ao JQuery.

*{
 border: 0;
 padding: 0;
 margin:0;
 }
 body{
 font-family:Tahoma,Arial,Helvetica,sans-serif;
 font-size: 14px;
 font-weight: bold;
 }
 ul {
 border: 1px dotted #ccc;
 width: 200px;
 }
 ul ul{
 border: none;
 width: 200px;
 }
 ul li a {
 display: block;
 text-decoration: none;
 background: #f57327;
 color: #fff;
 padding: 2px;
 outline:none;
 border: 1px solid #b8360b;
 }
 ul li li a {
 display: block;
 text-decoration: none;
 font-size: 13px;
 font-weight: normal;
 background: #f59247;
 border: none;

Agora a mágica do JQuery, para atingir o efeito esperado usamos primeiro o “hide” para esconder nossos submenus que serão abertos com o efeito tipo Accordion. Em seguida, o truque: para cada elemento “a” é adicionado o evento click que mostra ou esconde nossos menus usando o slide criando um efeito realmente bom.

function initMenu() {
 $('#menu ul').hide();
 $('#menu li a').click(
 function() {
 var checkElement = $(this).next();
 if((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
 checkElement.slideUp('normal');
 return false;
 }
 if((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
 $('#menu ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
 return false;
 }
 }
 );
}
$(document).ready(function() {initMenu();});

Com este exemplo pode-se notar que é possivel criar efeitos realmente atraentes usando jQuery utilizando muito pouco código, o que agiliza muito o trabalho. O resultado pode ser visto aqui: preview

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