Menu Sanfona com JQuery
Um menu sanfona(Accordion Menu) é um menu divido por categorias que quando está mostrando os links de uma categoria esconde os links das outras(ele estica e comprime como uma sanfona).
Esta funcionalidade pode também ser aplicada a um texto com vários tópicos ficando disponível os títulos e quando clicado mostra somente o texto do tópico. Este recurso é muito interessante quando temos um texto grande dividido em tópicos, pois não deixa a página muito longa.
Nesta implementação vamos utilizar uma lista de definições ( dl
– dt
– dd
) então segue abaixo o HTML do menu:
<dl> <dt><a href="#">Menu 1</li></a></dt> <dd> <ul> <li><a href="#">Menu 1 - Item 1</a></li> <li><a href="#">Menu 1 - Item 2</a></li> <li><a href="#">Menu 1 - Item 3</a></li> </ul> </dd> <dt><a href="#">Menu 2</li></a></dt> <dd> <ul> <li><a href="#">Menu 2 - Item 1</a></li> <li><a href="#">Menu 2 - Item 2</a></li> <li><a href="#">Menu 2 - Item 3</a></li> </ul> </dd> <dt><a href="#">Menu 3</li></a></dt> <dd> <ul> <li><a href="#">Menu 3 - Item 1</a></li> <li><a href="#">Menu 3 - Item 2</a></li> <li><a href="#">Menu 3 - Item 3</a></li> </ul> </dd> </dl>
Agora aplicamos um CSS:
dl { width: 300px; } dl,dd { margin: 0; } dt { background: #CCC; font-size: 18px; padding: 5px; margin: 2px; } dt a { color: #000; } dd a { color: #000; } ul { list-style: none; padding: 5px; }
Agora vamos a mágica com a biblioteca JQuery(Não se esqueça de importar a biblioteca!):
$(document).ready(function(){ $("dd").hide(); $("dt a").click(function(){ $("dd:visible").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; }); });
Na linha 2 escondemos todos os elementos dd
(as definições ou seja os sub-links) as ficando somente os dl
(os títulos das categorias/tópicos) a mostra.
Na linha 3 definimos o evento onclick
do link do elemento dt
titulo para que faça a animação slideUP()
(linha 4) no elemento dd
que está visível ocultando os sub-links.
Na linha 5 através do método parent()
seleciona o elemento pai do link clicado(o elemento dt
) e através do método next()
seleciona o próximo elemento a partir do elemento dt
que contém o link clicado, que é o elemento dd
e chama o método slideDown("slow");
que mostra os sub-links.
Espero que seja útil, até a próxima!