Accordion Menu - Mootools

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:

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

Vamos começar???
primeiro precisamos do HTML

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

<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>

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

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

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

ficando assim:

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:

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

<style>
	.meuPrimeiroAccordion{
		position:relative;
		float:left;
		width:300px;
	}
	
	.accordionmenu{
		position:relative;
		float:left;
		width:100%;
		background:#000066;
		color:#FFFFFF;
	}
	
	.accordionconteudo{
		color:#666666;
	}
</style>

Fácil né?