Menu com Jquery
Ultimamente estou estudando o Jquery, e cada vez mais fico impressionado com a sua simplicidade, neste post vou construir um menu do tipo accordion.
Iniciaremos construindo um XHTML semântico, eu costumo dizer em aula “todo menu é uma lista”, então criaremos uma lista
<div id="menu">
<ul><li>
<a href="#1" href="#1">Menu 1</a>
<ul><li>
<a href="#1-1" href="#1-1" title="SubMenu 1-1">SubMenu 1-1</a></li><li>
<a href="#1-2" href="#1-2" title="SubMenu 1-2">SubMenu 1-2</a></li><li>
<a href="#1-3" href="#1-3" title="SubMenu 1-3">SubMenu 1-3</a></li>
</ul></li><li>
<a href="#1" href="#1">Menu 2</a>
<ul><li>
<a href="#2-1" href="#2-1" title="SubMenu 2-1">SubMenu 2-1</a></li><li>
<a href="#2-2" href="#2-2" title="SubMenu 2-2">SubMenu 2-2</a></li><li>
<a href="#2-3" href="#2-3" title="SubMenu 2-3">SubMenu 2-3</a></li><li>
<a href="#2-4" href="#2-4" title="SubMenu 2-4">SubMenu 2-4</a></li><li>
<a href="#2-5" href="#2-5" title="SubMenu 2-5">SubMenu 2-5</a></li><li>
<a href="#2-6" href="#2-6" title="SubMenu 2-6">SubMenu 2-6</a></li>
</ul></li><li>
<a href="#1" href="#1">Menu 3</a>
<ul><li>
<a href="#3-1" href="#3-1" title="SubMenu 3-1">SubMenu 3-1</a></li><li>
<a href="#3-2" href="#3-2" title="SubMenu 3-2">SubMenu 3-2</a></li><li>
<a href="#3-3" href="#3-3" title="SubMenu 3-3">SubMenu 3-3</a></li>
</ul></li>
</ul>
</div>
Percebam que este menu é simplesmente uma lista com sub listas.
Agora vamos adicionar o código para fazer o efeito do accordion:
$(document).ready(function(){
//adicionando o evento click a todos os links que estão na primeira ul dentro da div menu
$('#menu').find('ul:eq(0)> li > a').click(function(){
//adicionando o efeito ao elemento ul que está dentro da mesma li do link que foi clicado
$(this).parent().find('ul:eq(0)').slideToggle("slow");
});
});
Neste ponto já temos o menu funcionando, agora vamos adicionar um pouco de css:
#menu{
width:10em;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
}
#menu a{
text-decoration:none;
display:block;
}
#menu ul{
margin:0px;
padding:0px;
}
#menu ul a{
background-color:#ff0000;
color:#FFFFFF;
}
#menu ul ul a{
background-color:#FFFFCC;
color:#999999;
}
#menu ul ul{
display:none;
}
Este exemplo demostra como é fácil tabalhar com o Jquery, a forma de selecinar os elementos é muito semelhante ao css, só que com alguns recursos a mais, irei explicar isto em outro post.
2008-10-31 at 9.02 am
Olá! Esse seu artigo foi o melhor que encontrei! Super acessível e de linguagem clara! Parabéns!
Deu quase certo no meu blog. Só não soube onde colocar o texto do “efeito do accordion” no menu do blog… Você poderia me ajudar?
Muitíssimo obrigada, valeu mesmo.
2008-12-15 at 3.06 pm
Cara, muito bom o teu tutorial, FACIL de entender e o código SUPER limpo.
PARABENS!!!!!
Fiz uma modificação, os elementos do menu sobem e descem, ou seja, caso esteja escondido ele irá aparecer, se estiver aparecendo ele irá esconder.
$(document).ready(function(){
$(’#menu’).find(’ul:eq(0)> li > a’).click(function(){
if ($(this).parent().find(’ul:eq(0):first’).is(”:hidden”)) { //verifica se o elemento está escondido
//se sim, mostra o elemento, se não, esconde o emelento.
//adicionando o efeito ao elemento ul que está dentro da mesma li do link que foi clicado
$(this).parent().find(’ul:eq(0)’).slideDown(500);
// Start animation
} else {
$(this).parent().find(’ul:eq(0)’).slideUp(500);
}
});
});
Abração amigo!
2008-12-16 at 3.01 pm
xD Ah que horror… dias depois fui testar o efeito q tu fez, por curiosidade hausdhaushd
enviei o if totalmente desnecessário, pois o slideToggle pra mim era novo, ja tinha visto, porém nunca utilizado :S
faz o mesmo efeito sem precisar de frescura de if…
bom, mas o if fica para caso alguem queira implementar outra ação no botao…
abraços e obrigado por dividir o código com o pessoal!