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

Leave a Reply