Accordion Menu (menu sanfona)
Segunda-feira, Abril 2nd, 2007 by adminOpa 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á).
Dúvidas? Manda pro fórum que agente gosta de responder. Somos doidos. Eu não respondo por email 