Criando um menu retrátil com CSS e jQuery

Por Giuliano Rodrigues de Souza em 4 de setembro de 2009

Hoje vou ensinar como criar um menu usando listas (ol) e que tem o efeito de expandir/retrair feito com jQuery.

O efeito em sí é bem simples e fácil de ser modificado… O meu foi feito usando HTML puro e uma folha de estilos (CSS) pequena. No final do tutorial você vai encontrar o link pra download do arquivo .rar com o exemplo dessa aula.

Veja aqui um exemplo de como vai ficar o menu.

Bom… vamos lá!

Código (X)HTML do menu

<ul id="menu">
	<li class="header">Menu</li>
	<li><a href="#">Página inicial</a></li>
	<li><a href="#">Notícias</a></li>
	<li class="parent"><a href="#">Produtos</a>
<ul class="sub-menu">
	<li><a href="#">Camisetas</a></li>
	<li><a href="#">Calças</a></li>
	<li><a href="#">Livros</a></li>
</ul>
</li>
	<li><a href="#">Quem somos nós</a></li>
	<li><a href="#">Contato</a></li>
</ul>

Vejam que o sub-menu (que irá aparecer) fica dentro do <li> e fora do <a>.

Código CSS do menu

* {
	margin: 0px;
	padding: 0px;
}
 
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	margin: 20px;
} 
 
ul {
	list-style: none;
}                  
 
ul#menu {
	width: 170px;
	border: 1px solid silver;
	margin-top: 20px;
}
 
ul#menu li {
	color: black;
	line-height: 19px;
	background: #F4F4F4;
}
 
ul#menu li.header {
	background: #DFDFDF;
	font-weight: bolder;
	padding: 0px 3px;
	font-size: 12px;
}   
 
ul#menu li a {
	color: black;
	text-decoration: none;
	display: block;
	padding: 0px 3px;
	outline: none;
}                     
 
ul#menu li.parent &gt; a {
	background: transparent url('../img/down.gif') right center no-repeat;
}                   
 
ul#menu li.aberto &gt; a {
	background: transparent url('../img/up.gif') right center no-repeat;
}                   
 
ul#menu li a:hover {
	background-color: #EAEEFF;
}
 
ul#menu li ul.sub-menu {
  	display: none;
}                 
 
ul#menu li ul.sub-menu li a {
	padding-left: 15px;
	color: maroon;
}

Bloco de código do efeito (jQuery)

$(function() {
	// Evento de clique do elemento: ul#menu li.parent &gt; a
	$('ul#menu li.parent &gt; a').click(function() {
		// Expande ou retrai o elemento ul.sub-menu dentro do elemento pai (ul#menu li.parent)
		$('ul.sub-menu', $(this).parent()).slideToggle('fast', function() {
			// Depois de expandir ou retrair, troca a classe 'aberto' do <a> clicado
			$(this).parent().toggleClass('aberto');
		});
		return false;
	});
});</a>

É só juntar todas as peças (como foi feito no exemplo) e o seu menu irá funcionar que é uma maravilha!

O código do efeito pode parecer um pouco complicado pra quem tá começando com jQuery, mas é só ler os comentários e procurar um pouco sobre cada função (slideToggle, toggleClass, click) na documentação que, com os exemplos de lá vai ficar tudo claro.

Faça aqui o download do arquivo .rar com os arquivos dessa aula.

Espero que tenham gostado, qualquer dúvida é só falar.

Veja também

Tags:CSS, html, javascript, JQuery

Categorias : Geral

Tags: CSS, html, javascript, JQuery

Comentários

Nenhum comentário ainda.