Menu acordeon (sanfona) com jQuery
Categoria javaScript, jQuery | 10/03/2010 | Autor - Adriano MeiraOlá 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!
Adriano Meira
Adriano Meira é o criador do blog e trabalha atualmente na Brasil na Web, ha mais de 10 anos vem trabalhando na área de Webdesigner e está cursando a Faculdade INAP no curso de Design Gráfico.
Isso pode ser interresante para você:
| Tweet |
Comente este artigo você também!
Comentários (28)
-
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!!
-
Muito obrigada pela sua disposição desse tutorial!! eu estava mesmo precisando ;D
-
Adriano help!! Só estou tendo um probleminha
Toda vez que eu clico no menu independente do botão
ele volta ao topo da imagem, ou seja, toda vez que clico ele vai la pra cima, mesmo sendo o sei la 18º que eu abri. Espero que entenda o que estou querendo dizer
Obrigada mais uma vez! -
Eu de novo encomodando auisheuahse
queria q ao abrir um o outra aba fechasse para não ter como deixar todos abertos só aquele que você selecionou hihi
duas duvidas, não sei muito disso sabe
Nada que esses tutoriais não salvem minha vida
Sucesso! -
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
nesse aqui eu fiz uns testes e não teve nenhuma das duas coisas que eu comentei, só que ele só utilizou o javascript e é bem diferente (e claro que o seu é mais bonito ^^)
Acho que agora da de entender hihihi
Obrigada desde já -
Ta muito muito muito obrigada
sei como é ruim final de ano idependente do que :/
eu já estou de férias!!
Agora a ultima duvidazinha
Sou chata ne uasehiahse
Queria então que quando eu clicasse de voltano que esta aberto ele fechasse so q quando eu clico ele feche e abre de novo
Sou leiga em java e etc hihi
Obrigada desde jáá por tudo
-
se não der deixa ta bom assim aiusheiuahe
é que eu sou chatinha mesmo
-
Ahmm eu botaria isso antes ou depois do q?
já tentei várias formas hihihi
Por enquanto ta assim:$(document).ready(function(){
$(“.conteudoMenu”).hide();
$(“.itemMenu”).click(function(){
$(“.conteudoMenu”).slideUp(300); $(this).next(“.conteudoMenu”).slideToggle(300);});
})Obrigada por tudo!
-
Rapaz!
Vlw.
Tava querendo fazer um texto expansivel e com a sua ajuda ficou blzinha.
Vlw -
OOii lembra de mim?
Enfim tava tentando achar na net uma galeria lightbox até q me agradei por essa: http://www.huddletogether.com/projects/lightbox2/#overviewsó que quando eu tento botar a galeria o menu não funciona ou vice-versa dependendo da posição dos script :/
queria saber como faço para retirar esse conflito
Do jeito abaixo mostra como está com o menu funcionando e a galeria não (isso vai depende se é organizado em cima ou embaixo do script que chama o jquery 1.4.1)————
$(document).ready(function(){
$(“.conteudoMenu”).hide();
$(“.itemMenu”).click(function(){
$(“.conteudoMenu”).slideUp(300);
$(this).next(“.conteudoMenu”).slideToggle(300);
});
})———–
se eu botar aquilo ali entre os
pra baixo do proximo script a gaeria funciona e o menu não :/ -
ops não apareceu
$(document).ready(function(){
$(“.conteudoMenu”).hide();
$(“.itemMenu”).click(function(){
$(“.conteudoMenu”).slideUp(300);
$(this).next(“.conteudoMenu”).slideToggle(300);
});
})vamos ver se agora aparece
-
ixii como posso te mandar isso?
-
Enfim ja resolvi botei um negocio de noconflit e mudei uns $ para jquery
ai ja funcionou
parabéns pelo seu blog me ajudou muito o menu ^^ quando o site estiver pronto eu volto aqui para você ver
-
Podia fazer um de paginação, eu vi em vários lugares esse http://tympanus.net/jPaginate/
só que ninguém explica muito bem :/
eu vou continuar procurando mas segue um post pra fazer
-
Oi Adriano,
Como eu faria para colocar imagens no menu sanfona. Vou te explicar melhor…quando todos os item estiverem fechados apareceria na frente de cada um um “+” e quando clicar ele fica “-” porém recolhendo o item que foi anteriormente aberto e deixando ele com o “+” novamente…deu pra entender?
Obrigada,
-
Estou lhe escrevendo so para agradecer, estou desenvolvendo um site com accordion e ao clicar para abrir, ia para o topo da página, e graças a uma das suas dicas consegui resolver o problema, valeu.





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