Desenvolvimento - Javascript

Criando um menu accordion com jQuery, HTML e CSS

Veja neste artigo como criar um menu para seu site semelhante aos usados em aplicações mobile, usando o plugin accordion com html, css e javascript.

por Joel Rodrigues


Com o avanço das páginas web voltadas para dispositivos móveis, um padrão de menu que ganhou popularidade foi o menu estilo accordion. Em algumas IDE’s, existem componentes com funcionalidade semelhante que geralmente são chamadas de NavBar. Neste artigo, apresentarei uma solução eficiente e simples de ser implementada, para o desenvolvimento de um menu bastante adequado tanto para páginas em altas resoluções quanto para dispositivos móveis.

O menu será composto por um cabeçalho, um corpo e um rodapé. O corpo do menu, por sua vez, será dividido em grupos. Dentro de cada grupo, podem ser inseridos quaisquer controles que se adaptem a estrutura, porém, no exemplo que será desenvolvido aqui, incluirei apenas texto no menu.

Inicialmente, vejamos a estrutura HTML do menu e observemos o quão simples ela é.

Listagem 1: Estrutura HTML do menu

<DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
	<div class="navBar">
		<div class="cabecalho">
			Barra de navegação
		</div>
		<div class="grupo">
			<div class="titulo">Grupo 1</div>
			<div class="conteudo">Conteudo 1</div>
		</div>
		<div class="grupo">
			<div class="titulo">Grupo 2</div>
			<div class="conteudo">Conteudo 2</div>
		</div>
		<div class="grupo">
			<div class="titulo">Grupo 3</div>
			<div class="conteudo">Conteudo 3</div>
		</div>
		<div class="rodape">
			Rodapé
		</div>
	</div>	
<body>
</html>

É importante observar que foi adicionada uma referência à biblioteca jQuery, a qual, neste caso, encontrava-se em um arquivo local, mas o leitor pode referenciar o arquivo na web.

Apenas o código HTML acima não tem muito sentido ou aplicação prática. Trata-se apenas de um conjunto de div’s agrupadas, como mostra a Figura 1.

Aparência inicial do menu

Figura 1: Aparência inicial do menu

Vamos então aplicar uma folha de estilos à página para que o menu tome a forma desejada. O modo como o CSS é inserido, se interno ou externo à página não terá diferença prática, logo, fica a critério do leitor.

Listagem 2: Folha de estilo para dar forma ao menu

<style type="text/css">
	body{
		font-family:Calibri, Verdana, Tahoma, Arial
	}
	.navBar{
		height:auto;
		overflow:hidden;
	}

	.grupo{
		height:auto;
		border:solid 1px;		
	}

	.titulo{
		padding:5px;
		height:20px;
	}

	.conteudo{
		display:none;
		padding:5px;
	}

	.cabecalho{
		border:solid 1px;
		border-radius:5px 5px 0 0;
		padding: 5px;
		height:20px;
		background: rgb(112, 156, 190)
	}

	.rodape{
		border:solid 1px;
		border-radius: 0 0 5px 5px;
		padding: 5px;
		height:20px;
		background: rgb(112, 156, 190);
	}	
</style>

Em geral são definidas as alturas dos grupos, do cabeçalho e do rodapé, as cores iniciais e as bordas superiores e inferiores são arredondadas (recurso das CSS3) para dar um design mais agradável à lista de opções. A Figura 2 mostra a como ficou a página.

Aparência do menu formatado

Figura 2: Aparência do menu formatado

Bem melhor, não é mesmo?

Como se pode ver na Listagem 1, os grupos são compostos por um título e um conteúdo, sendo que este último fica inicialmente oculto, o que é feito através da definição da propriedade display como none.

O conteúdo de cada grupo deve tornar-se visível apenas quando o grupo for selecionado, ou seja, quando o usuário clicar no título do grupo. Para exibir o conteúdo, utilizaremos a função slideDown do jQuery para que a exibição se dê de forma animada.

Para conhecer e entender melhor o efeito slide em jQuery, sugiro a leitura deste artigo sobre efeitos Fade e Slide com jQuery.

A seguir, temos o código jQuery responsável por dar funcionalidade ao menu.

Listagem 3: Código Javascript para dar funcionalidade ao menu

<script type="text/javascript">
var corAtiva = "rgb(112, 156, 190)";
var corInativa = "rgb(255, 255, 255)";
$(function(){
	$(".titulo").hover(
		function(){$(this).css("background", corAtiva);},
		function(){$(this).css("background", corInativa)}
	);

	$(".titulo").click(function(){
		$(".conteudo").slideUp();
		var cont = $(this).next();
		$(cont).slideDown("fast");		
	});
});
</script>

Inicialmente definimos duas variáveis globais que representam as cores utilizadas no menu. Uma corAtiva para destacar o item quando o cursor for posto sobre o título do grupo e uma corInativa que é a cor padrão, no caso, branco.

Utilizamos então o evento hover para alterar a cor do background do título do grupo ao receber e perder o foco do cursor do mouse.

A Figura 3 mostra um grupo em destaque sobre o qual o cursor do mouse foi posicionado.

Grupo em destaque

Figura 3: Grupo em destaque

A principal parte do código está no evento click do título dos grupos. Inicialmente é aplicado o efeito slideUp em todos os conteúdos que possam estar abertos (na prática só será um) e, em seguida, o conteúdo referente ao título clicado é exibido com o slideDown.

A função next() recupera o elemento seguinte ao que invocou o evento, no caso o título. Então a variável “cont” representa a div que vem logo em seguida do título, ou seja, o conteúdo. Tendo esse controle, aplica-se o efeito slideDown.

O resultado é mostrado na Figura 4, onde o grupo 3 recebeu o clique do mouse e seu conteúdo foi então exibido.

Grupo selecionado com conteúdo exibido

Figura 4: Grupo selecionado com conteúdo exibido

Como vimos, não foram utilizados recursos avançados de design ou Javascript para tornar possível a implementação deste menu. O leitor pode então facilmente customizar as configurações e dar a aparência desejada à página.

Grato pela atenção, finalizo aqui este artigo. Até a próxima.
Joel Rodrigues

Joel Rodrigues - Técnico em Informática - IFRN Cursando Bacharelado em Ciências e Tecnologia - UFRN Programador .NET/C# e Delphi há quase 3 anos, já tendo trabalhado com Webservices, WPF, Windows Phone 7 e ASP.NET, possui ainda conhecimentos em HTML, CSS e Javascript (JQuery).