Webly

Internet + Humana

Ir para o Conteúdo
Ir para o Menu
Ir para a Busca
Ir para o Login

Assine:

Navegação

Accordion Menu - Mootools

Menu sanfona

Escrito por dragun em JavaScript e Ajax. Data: 31/07/2008

Ver tópico original no fórum.

Primeiro você precisará fazer o download do mootools e do plugin accordion que podem ser encontrados em: http://mootools.net

Veja página de demonstração

Antes de começar,
1- O documento deve estar de acordo com os padrões web e utilizando o doctype Strict, caso contrário o accordion não funcionará
2- No efeito de transição, o mootools remove qualquer borda ou padding dos elementos do acordion, então é recomendavel utilizar esses elemento como um container para os elementos estilizados

Ex:

CODE

<accordion tag>
menu estilizado....bla bla bla
</accordion tag>

Vamos começar???
primeiro precisamos do HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo de Accordion</title>
</head>

<body>
    <dl class="meuPrimeiroAccordion" id="exemploAccordion">
      <dl>
        <dt class="accordionmenu"><b>PHP</b></dt>
        <dd class="accordionconteudo">Aqui vamos falar sobre PHP.</dd>
        <dt class="accordionmenu"><b>JAVASCRIPT</b></dt>
        <dd class="accordionconteudo">Aqui vamos falar sobre JavaScript.</dd>
        <dt class="accordionmenu"><b>CSS</b></dt>
        <dd class="accordionconteudo">Um pouquinho de CSS para terminar.</dd>
      </dl>
    </dl>
</body>

</html>

e agora o javascript...

Não se esqueça de adicionar o mootools-core.js e o mootools-more.js em sua página

CODE

antes de qualquer coisa, você só pode chamar o javascript após o menu estar carregado usando o onload ou colocando o script depois do menu.
O mootools oferece um recurso chamado onDomReady, que só é ativado após a página ter cido carregada. A diferença dele para o onload é que o onload é ativado após a página estar carregada por completa, ou seja, html+scripts+css+imagens, com o onDomReady, não precisamos esperar as imagens serem carregadas

CODE

window.addEvent('domready', function(){
//AQUI VAI O CóDIGO
});

usuário nervoso say: Chega de enrolação...quero ver o menu funcionando!

hehehe, ok! ok!

Vamos colocar o seguinte código dentro do domready

CODE

new Accordion($$('#exemploAccordion dt'), $$('#exemploAccordion dd'));

ficando assim:

CODE

window.addEvent('domready', function(){
new Accordion($$('#exemploAccordion dt'), $$('#exemploAccordion dd'));
});

o accordion menu possuí algumas opições que podem ser conferidos aqui.
uma muito boa, que sempre uso é o alwaysHide
Por padrão, sempre fica uma "aba" do accordion aberta, setando o alwaysHide como true o usuário poderá fechar todas as abas...

exemplificando no nosso código:

CODE

window.addEvent('domready', function(){
      new Accordion($$('#exemploAccordion dt'), $$('#exemploAccordion dd'), {
            alwaysHide: true
      });
});

Ah! Esqueci de avisar, já está funcionando...
Fácil né?

Mas o menu está muito feio
Vamos adicionar uma cor a esse preto-e-branco com o css

CODE