Menu acordeon (sanfona) com jQuery
Categoria jQuery, javaScript | 10/03/2010Olá pessoal desculpem a demora surgiu um grande problema para eu resolver, tenho que refazer todo o sistema administrativo dos meus clientes, por isso a falta de tempo.
Mas vamos lá hoje vou mostrar como é fácil e rápido fazer um menu acordeon (sanfona) com jQuery. Para começar vamos para o HTML e CSS assim você poderá controlar melhor o estilo, o estilo aqui em questão bem como o HTML são ilustrativos fique a vontade para modificar ou fazer da sua melhor forma.
Para o HTL (explico mais abaixo o porque desta estrutura)
<ul id="menuGeral">
<li><a href="#" class="itemMenu">Gerenciar NotÃcias</a>
<div class="conteudoMenu">
<a href="#">Adicionar nova NotÃcia</a>
<a href="#">Pesquisar NotÃcias</a>
</div>
</li>
<li><a href="#" class="itemMenu">Gerenciar Eventos</a>
<div class="conteudoMenu">
<a href="#">Adicionar novo Evento</a>
<a href="#">Pesquisar Eventos</a>
</div>
</li>
<li><a href="#" class="itemMenu">Gerenciar Meus dados</a></li>
</ul>
E para o CSS:
ul#menuGeral{
margin:0px;
padding:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
list-style:none;
}
ul#menuGeral li{
}
/*-Para todos os atributos 'a', aqui será a marcação da sanfona-*/
ul#menuGeral a{
display:block;
padding:3px;
cursor:pointer;
color:#000;
text-decoration:none;
}
/*-Para todos os atributos 'a' dentro de uma 'li'-*/
ul#menuGeral li a{
padding-left: 20px;
background-color:#DDE0EF;
border:1px solid #D4D4D4;
margin-bottom:1px;
}
ul#menuGeral li a:hover{
background-color:#B7BDDD;
}
/*-O conteudo que fica debaixo da opção da sanfona-*/
ul#menuGeral .conteudoMenu{
border-left:1px solid #D4D4D4;
border-right:1px solid #D4D4D4;
padding:5px;
background-color:#F7F7F7;
}
ul#menuGeral .conteudoMenu a{
background-color:#F7F7F7;
padding-left:25px;
margin-bottom:0px;
border:0px;
}
ul#menuGeral .conteudoMenu a:hover{
background-color:#DADADA;
}
Ok veja agora como ficou seu menu, bunito né? Lembre-se mude o quanto quiser o importante vem agora, veja que mamão com açúcar, importe seu jQuery, caso não tenha baixe-o aqui.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Em logo abaixo coloque o seguinte código, irei explicar:
<script type="text/javascript">
$(document).ready(function(){
$(".conteudoMenu").hide();
$(".itemMenu").click(function(){
$(".conteudoMenu").slideUp("slow");
$(this).next(".conteudoMenu").slideDown("slow");
});
});
</script>
Com este código você ve que o menu que clica em azul abre e se houver outro aberto ele fecha, para deixar somente o menu aberto e ao clicar no mesmo ele feche use isso:
<script type="text/javascript">
$(document).ready(function(){
$(".conteudoMenu").hide();
$(".itemMenu").click(function(){
$(this).next(".conteudoMenu").slideToggle(300);
});
});
</script>
Note que removi uma linha e mudei outra, vamos a explicação do jQuery, “confiram comigo no replay“.
Depois de ler o documento eu escondo todos os conteúdos, para garantir que o menu ficará fechado, “mas Tio se eu quiser que apenas o primeiro fique aberto como faço?”, simples mude a primeira instrução para:
$(".conteudoMenu:not(:first)").hide();
Nem precisa comentar né: Se não for o primeiro…
Seguindo a instrução que digo que ao clicar no seletor de classe “itemMenu” no primeiro ele diz que sobe todos os seletores com classe “conteudoMenu” e em seguida abaixo o próximo seletor deste mesmo que eu cliquei (exibindo o conteúdo), para a segunda alternativa depois de clicar usa a propriedade “slideToggle” que retorna uma ação anterior, que no caso é escorregar.
Para um bom funcionamento deste efeito sempre tenha em mente que ao clicar em algo, um seletor abaixo dele abrirá e assimpor diante, por isso a estrutura de HTML que mencionei acima, mas pode mudar como por exemplo:
<h4 class="itemMenu">Gerenciar NotÃcias</h4> <cite class="conteudoMenu"> Lorem ipsum dollor<br /> Set huni... </cite> <h4 class=""itemMenu">Outro Item sem nada</h4>
Simples, fácil né? Dúvidas postem ai.
É isso ai até mais pessoal!
Isso pode ser interresante para você:
Comente este artigo você também!
Comentários (5)
-
gostaria de saber como faço para fazer o meu menu sanfona ficar igual o seu (ficar todos os três menus fechados por padrão) o resto permanece da mesma forma que esta, o meu código ele está pra ficar o primeiro aberto por padrão, tentei fazer igual vc fez ai, mas meu código está diferente do seu, desde já obrigado pela ajuda!
-
Olá,
Muito obrigado, seu blog salvou meu site!!!
a unica duvida que eu tenho é:
é possivel fechar o item aberto, pois quando eu tento fechar ele fecha e abre de novo, eu entendi o porque, porém, nao manjo nada de jquery, to aprendendo agora, e nao consegui arrumar.Parabéns pelo blog!! Vou virar visitante diário!!














Aprender – nuunca e demais ainda mais com grande amigo MESTRE rs. Gostei de conhecer o seu BLOG e saber que posso aprender com você.
Parabéns