Pinceladas da Web

Esse efeito de Accordion que vou mostrar aqui hoje pode ser usado não somente para menus, mas também para outras finalidades. É muito simples conseguir esse tipo de efeito utilizando a jQuery, que proporciona uma simplicidade ao escrever código JavaScript. A marcação HTML utilizada nesse exemplo é a seguinte:

<dl>
	<dt><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/css/">CSS</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/xhtml/">XHTML</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/webstandards/">WebStandards</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.cssnolanche.com.br/categoria/css/">Tutoriais CSS</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/javascript/">JavaScript</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/jquery/">jQuery</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.jquery.com">jQuery</a></dt>
    <dd>
        <ul>
            <li><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
            <li><a href="http://docs.jquery.com/">Documentação</a></li>
            <li><a href="http://docs.jquery.com/Tutorials">Tutoriais</a></li>
        </ul>
    </dd>
</dl>

Como podem ver utilizei de listas de definição e listas desordenadas para montar o menu accordion, estando com o HTML pronto, vamos ao CSS:

body {font:1.6em Helvetica, Arial, sans-serif}
a {display:block; text-decoration:none}
dl {margin:0 auto; width:500px}
dt {background-color:#000; border-bottom:2px solid #fff; padding:5px}
dt a {color:#fff;}
dd, ul {margin:0; padding:0}
ul li {background-color:#EFEFEF; font-size:.6em; list-style:none}
ul li a {color:#069; padding:5px}
ul li a:hover {background-color:#aaa; color:#fff}

Você pode aplicar estilos como quiser ao seu menu, só apliquei alguns estilos aqui para um melhor entendimento do efeito final. Agora o grande responsável pelos efeitos é o JavaScript, primeiramente adicione o Framework jQuery a sua página, feito isso, basta utilizar o seguinte código JavaScript:

<script type="text/javascript">
	$(document).ready(function(){
		//Definimos que todos as tags dd terão display:none menos o primeiro filho
		$('dd:not(:first)').hide();
		//Ao clicar no link, executamos a funcão
		$('dt a').click(function(){
			//As tags dd's visíveis agora ficam com display:none
			$("dd:visible").slideUp("slow");
			//Após, a funcão é transferida para seu pai, que procura o próximo irmão no código o tonando visível
			$(this).parent().next().slideDown("slow");
			return false;
		});
	});
</script>

Como podem ver o código JavaScript está todo comentado tornando-se de fácil entendimento. Vejam aqui o exemplo criado para esse tutorial. Se quiser pode fazer o download dos arquivos do exemplo para estudo.