BotecoDigital.info

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 titulos 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<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:

1
2
3
4
5
6

     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!):

1
2
3
4
5
6
7
8

 $(document).ready(function(){
     $("dd").hide();
     $("dt a").click(function(){
        $("dd:visible").slideUp("slow");
        $(this).parent().next().slideDown("slow");
        return false;
     });
});

Na linha 1 escondemos todos os elementos dd(as definições ou seja os sub-links) as ficando somente os dl (os titulos 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 elementodd e chama o método slideDown(“slow”); que mostra os sub-links.

Veja o exemplo

Espero que seja util, até a próxima!