A Mootools, além de ser uma ótima biblioteca para tarefas variadas relacionadas a Strings, Arrays, DOM e Ajax, ela também possui alguns "extras" muito úteis na hora de desenvolver algo mais "bonitinho". O menu sanfona (ou accordion menu, como preferir) é um deles, do qual irei falar nesse post mais-do-que-atrasado. Aproveite e veja como ficará.

O HTML

Antes de começar com o comportamento, primeiro vamos criar o conteúdo do menu. Uma lista simples, com outras listas aninhadas, as quais
ficarão escondidas até que seus títulos sejam clicados.

<ul>
        <li><h3>Título 1</h3>
                <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
        <li><h3>Título 2</h3>
                <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
</ul>

Nada em especial até agora, mas temos que incluir mais alguns atributos aí. Para que a Mootools possa identificar quais itens serão clicáveis e quais deverão ficar “escondidos”, precisamos identificá-los com classes. Não há restrição para alguma classe específica, mas costumo usar toggler para os clicáveis e element para os itens escondidos.

<ul>
        <li><h3 class="toggler">Título 1</h3>
                <ul class="element">
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
        <li><h3 class="toggler">Título 2</h3>
                <ul class="element">
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
</ul>

O Script

Agora sim, a parte difícil, ou nem tanto assim. Como tudo na Mootools é baseado em classes, o menu sanfona não foge à regra. A classe Accordion é a responsável por todo o menu, desde identificar seus elementos até mostrar/esconder o conteúdo.

window.addEvent('domready', function() {
	var accordion = new Accordion('h3.toggler', 'ul.element')
})

Como parâmetros, passamos os títulos clicáveis e o conteúdo de cada item, somente isso. A biblioteca cuida do resto. Difícil, não?

Algumas Opções

Podemos ir um pouco além do básico, e adicionar alguma personalização em nosso menu. Para isso, a classe nos dá algumas opções. Basta passar um objeto como terceiro parâmetro. As opções possíveis são:

• show: índice do elemento a ser mostrado inicialmente
• display: índice do elemento a ser mostrado inicialmente. Diferentemente de show, esse elemento será mostrado com uma transição
• fixedHeight: altura fixa dos itens, padrão false
• fixedWidth: largura fixa dos itens, padrão false
• height: inclui transição de altura, padrão true
• opacity: inclui transição de opacidade, padrão true
• width: inclui transição de largura, padrão false
• alwaysHide: permite esconder todos elementos, em vez de manter ao menos um sendo mostrado, padrão false

Além das opções, temos também dois eventos:

• onActive: executado quando algum item se tornar ativo
• onBackground: executado quando algum item for escondido

Finalizando

Agora vamos modificar um pouco nosso menu, utilizando as opções e eventos vistos acima.

window.addEvent('domready', function() {
	var accordion = new Accordion('h3.toggler', 'ul.element', {
		"opacity": false,
		"onActive": function(toggler) {
			toggler.setStyle("color", "#f00");
			toggler.setStyle("font-weight", "bold");
		},
		"onBackground": function(toggler) {
			toggler.setStyle("color", "#000");
			toggler.setStyle("font-weight", "normal");
		}
	})
})

Pronto! Veja o exemplo finalizado. E mais: retirando todas as transições, você tem um menu sanfona totalmente customizável. O poder e a facilidade da Mootools. Incrível, muito bem pensado, por isso adoro essa biblioteca. Até mais!