Tag'n click

Quando vamos criar um menu muito grande que tenha pais e filhos, pensamos sempre em usar a técnica accordion certo? e muitas vezes por não sabermos o quão simples ele é acabamos usando plugins, que são ótimos, porém muitas vezes desnecessários.

Vou explicar agora como criar um menu accordion “na unha”.

Primeio vamos criar o html do nosso menu, que geralmente usamos ul, AHHH mais meu menu vai ter um dentro do outro como faço isso? simples basta usar essa estrutura:

<ul class="pai">
	<li><a href="#">Pai</a>
		<ul class="filho">
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
		</ul>
	</li>
	<li><a href="#">Pai</a>
		<ul class="filho">
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
		</ul>
	</li>
	<li><a href="#">Pai</a>
		<ul class="filho">
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
		</ul>
	</li>
	<li><a href="#">Pai</a>
		<ul class="filho">
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
			<li><a href="#">Filho</a></li>
		</ul>
	</li>
</ul>

OBS: Repare que dentro do li pai eu tenho uma ul que vai conter os filhos, e SIM é permitido usar desta maneira.

Depois de criado o html você vai perceber que os pais e os filhos estão todos no mesmo nivel, então … vamos esconder os filhos.

Neste exemplo vou usar um ‘class’ especifico:

ul.pai ul.filho { display: none; }

Se tudo der certo ( creio que sim ) os filhos sumiram.

Legal agora vamos para o javascript.
Para nosso script vamos utilizar o framework jQuery.
Aqui está o nosso script:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
	jQuery( document ).ready( function (){
		jQuery( 'ul.pai li a' ).click( function (){
			if( jQuery( this ).parent().find( 'ul.filho' ).is( ':visible' )){
				jQuery( this ).parent().find( 'ul.filho' ).slideUp();
			}
			else {
				if( jQuery( 'ul.pai' ).find( 'ul' ).is( ':visible' )){
					jQuery( 'ul.filho' ).slideUp();
				}
				jQuery( this ).parent().find( 'ul.filho' ).slideDown();
			}
		});
	});
</script>

O que eu fiz?

Linha 1: Insiro o codigo do jQuery na página.
Linha 2: Inicio o script.
Linha 3: Função ‘ready’, quando o DOM estiver carregado executa tal função.
Linha 4: Quando clicar no link pai executa tal função.
Linha 5: Nesta linha eu faço uma verificação( um if simples ).

 this = o link em que eu cliquei.
 parent = sobe um nível, ou seja, vai até o pai.
 find = encontrar um elemento dentro do que estou.
 is= é visivel.

Ou seja cliquei no link ( this ), fui para o pai do link que cliquei ( parent ), procurei o ul.filho ( find ), se estiver visível( is ) eu executo uma função.

Linha 6: Dou um slideUp no ul.filho, só entra nessa linha se este ul.filho já estiver visível, no caso irá esconde-lo.
Linha 7: Termina o if.
Linha 8: Inicio o else mais conhecido como ‘se não’.
Linha 9: Faço outra verificação, nesta eu verifico se existe algum filho visível.
Linha 10: Se existir eu escondo todos.
Linha 11: Termina o if.
Linha 12: Dou um slideDown no ul.filho, ou seja deixo ele visível.
Linha 13: Termina o else.
Linha 14: Termina a função ‘click’.
Linha 15: Termina a função ‘ready’.
Linha 16: Fecho a tag do script.

Agora é só estiliza-lo.