Menu acordeon (sanfona) com jQuery

Categoria jQuery, javaScript | 10/03/2010

Olá 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ê: