Posts Tagged Accordion

Menu Accordion (Sanfona) com jQuery e CSS

Postado por Danilo in jQuery em 12 de junho de 2009

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; }