Accordion Menu (menu sanfona)

ARTIGO PUBLICADO POR Micox ORIGINALMENTE EM:

http://elmicox.blogspot.com/2007/04/accordion-menu.htm

Opa pessoal, desculpe o sumiço. Em breve posto os ótimos resultados que tive no meu pedido de ajuda. Muita gente mesmo. Valeus povo.

Agora um tutorialzinho rápido pra saberem que tô vivo e usando JQuery. Convertam-se também! Amém.

Tutorial de como fazer um accordion menu (menu sanfona) rapidamente e de forma não obstrusiva, crossbrowser (IE, FF, OP) e com pouca digitação de código.
Pergunta: “a tradução seria ‘menu acordeão’ ?!?”.

Clique aqui pra ver uma página de demonstração do accordion menu .

Este tutorial foi postado inicialmente no fórum iEvolution. Cadastre-se, contribua, encha de perguntas lá. Vou ficar esperando.
O tuto foi adaptado de uma videoaula do site do oficial do JQuery.

Came to work soldier:

1) Você tem sua página com sua lista dt-dd-dl normal:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en-us”>
<head>
<title>DL Demo</title>
<style>
body { font-family: Arial; font-size: 16px; }
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style>
</head>

<body>
<dl>
<dt><a href=”/”>jQuery</a></dt>
<dd>
<ul>
<li><a href=”/src/”>Download</a></li>
<li><a href=”/docs/”>Documentation</a></li>
<li><a href=”/blog/”>Blog</a></li>

</ul>
</dd>
<dt><a href=”/discuss/”>Community</a></dt>
<dd>
<ul>
<li><a href=”/discuss/”>Mailing List</a></li>
<li><a href=”/tutorials/”>Tutorials</a></li>

<li><a href=”/demos/”>Demos</a></li>
<li><a href=”/plugins/”>Plugins</a></li>
</ul>
</dd>
<dt><a href=”/dev/”>Development</a></dt>
<dd>
<ul>

<li><a href=”/src/”>Source Code</a></li>
<li><a href=”/dev/bugs/”>Bug Tracking</a></li>
<li><a href=”/dev/recent/”>Recent Changes</a></li>
</ul>
</dd>
</dl>
</body>
</html>

2) Você baixa o jquery.

3) Você inclui o arquivo externo do jquery no seu documento.

<script type=”text/javascript” src=”jquery.js”></script>

4) Adiciona este script ao head da sua página:

<script>
$(document).ready(function(){
$(”dd:not(:first)”).hide();
$(”dt a”).click(function(){
$(”dd:visible”).slideUp(”slow”);
$(this).parent().next().slideDown(”slow”);
return false;
});
});
</script>

5) Prontim. Totalmente não obstrusivo, limpo, rápido, bonito, etc etc blábláblá.
Aposto que se interessou pela JQuery heim? Veja uma introdução sobre o bixo aqui também (link pedido descaradamente pelo meu ‘padrinho’ no jquery Vitor Prado heuaeh - mas o site do cara é bom mesmo pra aprender. Passeia lá).