Menu Accordion com jQuery
Postado por: Pedro Rogério emEsse efeito de Accordion que vou mostrar aqui hoje pode ser usado não somente para menus, mas também para outras finalidades. É muito simples conseguir esse tipo de efeito utilizando a jQuery, que proporciona uma simplicidade ao escrever código JavaScript. A marcação HTML utilizada nesse exemplo é a seguinte:
<dl>
<dt><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></dt>
<dd>
<ul>
<li><a href="http://www.pinceladasdaweb.com.br/blog/category/css/">CSS</a></li>
<li><a href="http://www.pinceladasdaweb.com.br/blog/category/xhtml/">XHTML</a></li>
<li><a href="http://www.pinceladasdaweb.com.br/blog/category/webstandards/">WebStandards</a></li>
</ul>
</dd>
<dt><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></dt>
<dd>
<ul>
<li><a href="http://www.cssnolanche.com.br/categoria/css/">Tutoriais CSS</a></li>
<li><a href="http://www.cssnolanche.com.br/categoria/javascript/">JavaScript</a></li>
<li><a href="http://www.cssnolanche.com.br/categoria/jquery/">jQuery</a></li>
</ul>
</dd>
<dt><a href="http://www.jquery.com">jQuery</a></dt>
<dd>
<ul>
<li><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
<li><a href="http://docs.jquery.com/">Documentação</a></li>
<li><a href="http://docs.jquery.com/Tutorials">Tutoriais</a></li>
</ul>
</dd>
</dl>
Como podem ver utilizei de listas de definição e listas desordenadas para montar o menu accordion, estando com o HTML pronto, vamos ao CSS:
body {font:1.6em Helvetica, Arial, sans-serif}
a {display:block; text-decoration:none}
dl {margin:0 auto; width:500px}
dt {background-color:#000; border-bottom:2px solid #fff; padding:5px}
dt a {color:#fff;}
dd, ul {margin:0; padding:0}
ul li {background-color:#EFEFEF; font-size:.6em; list-style:none}
ul li a {color:#069; padding:5px}
ul li a:hover {background-color:#aaa; color:#fff}
Você pode aplicar estilos como quiser ao seu menu, só apliquei alguns estilos aqui para um melhor entendimento do efeito final. Agora o grande responsável pelos efeitos é o JavaScript, primeiramente adicione o Framework jQuery a sua página, feito isso, basta utilizar o seguinte código JavaScript:
<script type="text/javascript">
$(document).ready(function(){
//Definimos que todos as tags dd terão display:none menos o primeiro filho
$('dd:not(:first)').hide();
//Ao clicar no link, executamos a funcão
$('dt a').click(function(){
//As tags dd's visíveis agora ficam com display:none
$("dd:visible").slideUp("slow");
//Após, a funcão é transferida para seu pai, que procura o próximo irmão no código o tonando visível
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
Como podem ver o código JavaScript está todo comentado tornando-se de fácil entendimento. Vejam aqui o exemplo criado para esse tutorial. Se quiser pode fazer o download dos arquivos do exemplo para estudo.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Pedro,
Muito bom o tutorial!
Só queria fazer uma observação: quando o usuário clica várias vezes consecutivas, o menu fica abrindo e fechando, como em “Como evitar problemas com animate” [http://www.pinceladasdaweb.com.br/blog/2009/06/08/jquery-como-evitar-problemas-com-animate/].
Você acha que seria interessante usar também o stop() nesse caso?
Abraços
@Flávio,
Se eu utilizar stop() alí a animação irá ocorrer a cada clique do usuário, ou seja, se eu clico a animação é disparada, se eu clico novamente ele dá uma pausa na animação e assim por diante. Experimente baixar o exemplo e aplicar o stop() que você verá o problema acontecer.
se nao me engano eu vi um BEM parecido que o micox fez =X
Explicação muito boa!
Grande abraço!
Muito bom mesmo. É complicado aplicar estes ensinamentos no blogger, muitos não funcionam, parece que esses menus animados só funcionam em sites mesmo.
Olá amigo, tenho que lhe agradecer. Estou a 3 dias tentando fazer um menu semelhante a esse que depois será aplicado um AJAX para carregar os produtos.
Esse tutorial se encaixou perfeitamente em meu problema, muito obrigado.
Apenas como uma sugestão, em um próximo tutorial, explique como fazer um menu deste tipo juntamente com AJAX, para carregar algum conteúdo.
Grato,
Felipe.
Estou tentando fazer um menu similar, mas sendo horizontal…
Ainda não achei em local nenhum algo do genero…
O site abaixo possui um exemplo do que desejo mais ou menos, mas em flash
http://www.oxylusflash.com/files/1571/index.html
Queria um help para fazer um menu parecido com esse flash desses…
Seria possível fazer o conteúdo ser mostrado acima, empurrando o botão para baixo? O link,( no caso, pinceladas,css no lanche, etc) ficaria na base do conteúdo que será, e não no topo. Estou precisando de algo assim.
Obrigado, parabéns pelo blog.
Rapaz, era bem esse menu que eu estava procurando :)
Mas me diga uma coisa, onde eu colo essas caixas de códigos, eu não sou muito bom em mexer nisso, como faço passo a passo por favor se puder ajudar. Esse foi o único menu accordion que encontrei que é ativado pelo clique, valeu man, abraços
Olá, legal esse menu, eu gostaria de saber o seguinte, quando clico no DT ele abre,desce o ul-li com os links, se volto a clicar no mesmo DT, ele sobe e desce, queria que quando clicasse na segunda vez ele fechasse o DT. Primeiro click abre, segundo click fecha. Da p ser? obrigado!
Olá, gostaria de saber se é possível quando clicar eu algum item o mesmo passa a ser o primeiro do efeito.
Adorei sua explicação, ela me ajudou a fazer um menu que estava brigando a muito tempo.
Obrigada.