Menu Accordion (Sanfona) com jQuery e CSS « Danilo

Menu Accordion (Sanfona) com jQuery e CSS

Hoje vou mostrar como criar um menu accordion (Sanfona) utilizando jQuery e CSS, com um exemplo bem prático.

Este menu accordion é mais conhecido como menu Sanfona, é muito útil quando temos um número grande de categorias e sub-categorias em um menu lateral, ele facilita à organização do menu e ainda podemos colocar uns efeitinhos com jQuery.

Para utilizar este menu é preciso da biblioteca do jQuery

Para baixar o jQuery clique aqui.

Chamando o jQuery

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

HTML:

Aqui está o html do menu, colocar um id=”nav-menu” na base do menu.

<ul id="nav-menu">
	<li>
		<a href="javascript:void(0);">Etapa 1</a>
		<ul>
			<li><a href="#">Etapa 1.1</a></li>
			<li><a href="#">Etapa 1.2</a></li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0);">Etapa 2</a>
		<ul>
			<li><a href="#">Categoria 2.1</a></li>
			<li><a href="#">Categoria 2.2</a></li>
		</ul>			
	</li>
	<li><a href="javascript:void(0);">Categoria 3</a></li>
	<li>
		<a href="javascript:void(0);">Categoria 4</a>
		<ul>
			<li><a href="#">Categoria 4.1</a></li>
			<li><a href="#">Categoria 4.2</a></li>
		</ul>
	</li>			
</ul>

Javascript:

Aqui neste código estamos bindando um evento clique para o próximo elemento depois da tag a que está dentro da li por sua vez dentro da ul com id #nav-menu, cada vez que clicar nela vamos dar um efeito slideToggle.

$(document).ready( function() {
	$('ul#nav-menu > li > a').click(function() {
		$(this).next().slideToggle();
	});
});

Css:

Agora aplicamos um css no menu para não ficar sem graça, mas você pode alterar conforme a necessidade.

ul#nav-menu { margin:0; padding:0; list-style:none; }
ul#nav-menu > li { margin-top:1px; background:#AFAFAF; font-weight: bold; width: 200px; list-style:none; }
ul#nav-menu > li > a { display:block; padding: 4px; color: #EFEFEF; text-decoration:none; outline:none; }
ul#nav-menu > li > a:hover { background: #8F8F8F; }
ul#nav-menu > li > ul { margin: 0; padding:0; list-style:none; display:none; background:#9F9F9F; }
ul#nav-menu > li > ul > li{ height: 30px; list-style:none; padding: 0;}
ul#nav-menu > li > ul > li:hover{ height: 30px; background: #8F8F8F;}
ul#nav-menu > li > ul > li a { display:block; padding: 2px 0 0 4px; color:#EFEFEF; text-decoration:none; outline:none; }
ul#nav-menu > li > ul > li a:hover { color:#FFF; background: #8F8F8F; }

Veja abaixo um exemplo do menu já pronto!

Compare preços de livros jQuery.

Accordion, CSS, javascript, jQuery

Postado na sexta-feira, 12 de junho de 2009, 16:21

#1 por Ricardo - 14 de junho de 2009 em 16:26

tutorial bom, vou usar danilo.. valew

Citar
#2 por Ge - 6 de julho de 2009 em 19:13

Obrigada pelo tutorial, me deu umas boas idéias. Mas como faria se eu quiser ao clicar num item de menu, automaticamente fechar qualquer outro que estiver aberto?

Citar
#3 por Eduardo - 17 de julho de 2009 em 11:36

Cara ótimo tutorial, simples e funcional, parabéns…

Citar
#4 por simone - 8 de março de 2010 em 18:23

muito legal!!! estou usando esse codigo… fiz algumas modificações e queria que um item e seus sub itens ficassem abertos (default) é possivel fazer isso? como fazer?

Citar
#5 por Tomaz - 10 de março de 2010 em 22:58

Os meus menus já estão começando abertos. Como faço para eles carregarem fechados. E aí sim clicar para abrir?

Abraços,
Tomaz

Citar
#6 por Danilo - 14 de março de 2010 em 15:14

Tomaz, não esqueça de iniciar o ul#nav-menu > li > ul ou seja o ul do submenu com “display:none;”
Abraço!

Citar
#7 por Danilo - 14 de março de 2010 em 15:15

Só tirar o “display: none;” do ul#nav-menu > li > ul
Abraço Simone…

Citar
#8 por Jose Vicente - 24 de março de 2010 em 12:09

Salve galera!

Muito pratico. So tive um probleminha com o css. não estou conceguindo fazer funcionar o css.. alguem podiria me passar o codigo se não for muito abuso da minha parte..
jose.vicente.de.sousa@gmail.com :D
Valew galera!!

Citar
#9 por Ana Cláudia Oliveiar - 26 de março de 2010 em 15:47

Muito obrigada pela ajuda.
Abraços

Citar
#10 por Eduardo - 1 de abril de 2010 em 18:54

No Safari o não esta funcionando, não abre os submenus…

Citar
#11 por Emilly - 23 de abril de 2010 em 16:21

Olá, queria saber se é possivel expandir uma categoria sem clicar, só passando o mouse por cima do item. Desde já obrigada.

Citar
#12 por Ademir - 25 de abril de 2010 em 00:21

O exemplo citado acima não esta abrindo, quando clico no mesmo.

Citar
#13 por Aline - 26 de abril de 2010 em 12:13

Danilo, muito bom o script! Obrigada!

Citar
#14 por Danilo - 27 de abril de 2010 em 11:20

Emily, tente usar o evento onmouseouver.. se não me engano tem dois posts que falam sobre eventos aqui no blog… ta nesta mesma categoria.
Qualquer coisa posta ae…

Citar