Postado por Micox - Náiron J. C. G..

02 Abril, 2007

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á).

Dúvidas? Manda pro fórum que agente gosta de responder. Somos doidos. Eu não respondo por email :-)

Marcadores: javascript, jquery, menus

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (30 comentários)

30 Comentários:

William Grasel Martins disse... 02 Abril, 2007 14:00: Bom artigo! jQuery ajuda mt mesmo!

Tava vendo as estatísticas do meu site pessoal, tem mais de 50 cliques do seu blog para meu site! =D

Abraços!
JulioGreff disse... 02 Abril, 2007 19:22: A jQuery anda fazendo um sucesso imenso, até estou pensando em adotar. Não cheguei a ver o exemplo, mas o código parece muuuito menor do que imaginava. Vamos testar em casa.
vitor_prado disse... 02 Abril, 2007 19:55: Aê Micox, fiel amado da jquery rsrsrrs...

Ótimo post...

mas bem que cê podia colocar a referência de iniciação com Jquery para meu post né?

http://www.vitorprado.com/iniciando_com_a_jquery/

Hum... A sagrada jquery vai te castigar se você não for um bom evangelista , rsrs...

abraços...

Fuiz...
Micox - Náiron J. C. G. disse... 02 Abril, 2007 21:08: @william, juliogreff
Usem a JQuery meus fiéis, usem e não se arrependerão! Vocês serão recompensados no dia da codificação final.
Amém.

@vitor
Tá lá. heheh
vitor_prado disse... 02 Abril, 2007 22:54: hauhauhahuahuhauha

"link pedido descaradamente"

Esta foi ótima...

risos..

Tenhas certeza que se enviares este post http://www.vitorprado.com/iniciando_com_a_jquery/

para mais 50 pessoas, você receberá em seu email o sagrado framework da Jquery.

Ele é capaz de lêr seus pensamentos e já ir digitando, e os problemas que seu cérebro não conseguir entender, tenhas certeza servo fiel, a Jquery vai revolver para você.
kakaroto disse... 08 Abril, 2007 12:00: Ai meu velho manero esse lance ai
do jquery aonde e departamento de sugestao de materias ????

henrique
Micox - Náiron J. C. G. disse... 12 Abril, 2007 20:32: @vitor_prado
hahehaehe, vc me mata de rir velho. hauhae

@kakaroto
Sugestão de matérias?
Ué, pode ser aqui, no meu email, ou no do rapaz maluco aí de cima (vitor prado) se for sobre a jquery.
Nando.cot disse... 19 Abril, 2007 23:58: Puxa!!!
Legal
Parabêns aí MICOX.
Não conhecia o jQuery!!!
Ele é bom mesmo.
Thiago disse... 06 Maio, 2007 00:49: poxaaa legal a jQuery
mai estou tendo problemas com acentuação ...vc sabe como resolver???
Micox - Náiron J. C. G. disse... 06 Maio, 2007 22:32: Problema de acentuação????
Não tem nada a ver com Accordion Menu ou com jQuery.

Vê se sua codificação tá correta.
Pode ser via tag META charset OU via linguagem server-side.

Acho melhor vc perguntar sobre isto no fórum iEvolution.
Guilherme Medeiros disse... 16 Maio, 2007 14:57: Show de bola micox!

Tu podia explicar o que é esses :visible :not (:first)

seria pseudo-classes do seletor css2 ?
Micox - Náiron J. C. G. disse... 17 Maio, 2007 07:23: Opa, são pseudo-seletores muito loucos do jquery. Ele une x-path e CSS.
A origem deles não sei não, sei que um indica os elementos visíveis e o outro indica os elementos que NÃO forem o primeiro da lista.

Mais aqui: http://docs.jquery.com/DOM/Traversing/Selectors

:)
Newton de Góes Horta disse... 02 Outubro, 2007 22:03: Esta postagem foi removida pelo autor.
Newton de Góes Horta disse... 02 Outubro, 2007 22:07: A partir de seu artigo acessei o site da JQuery e baixei o plugin Accordion que encontrei por lá, e, claro, a própria biblioteca.

O resultado do que fiz com ambos pode ser visto na barra lateral do Viche, e, diga-se de passagem, foi bem tranquilo.
Anônimo disse... 22 Novembro, 2007 17:00: Hello Micox!

Como faço para que o menu permaneça fechado, só sendo aberto quando clicado?

No modelo, o primeiro "nível" já fica aberto.

Valeu
Micox - Náiron J. C. G. disse... 22 Novembro, 2007 21:35: Opa anonimo, beleza?
É só mudar esta linha:
$("dd:not(:first)").hide();

Para isto:
$("dd").hide();

Veja que antes eu escondia todas MENOS a primeira.
Depois eu escondo todas mesmo.
Seráfico Neto disse... 09 Janeiro, 2008 19:15: Micox,

Primeiro parabéns. Agora vem o meu pedido de ajuda.

Ta tudo funcionando perfeito, só que eu queria que quando o user clicar novamente no menu que está aberto, ele ao invés de subir e descer, subisse e ficasse fechado. Ele tá fechando e abrindo, entendeu? Tem como resolver?

pode responder para seraficoneto@gmail.com
Valentim disse... 18 Fevereiro, 2008 10:42: Belo Tuto....

Cara eu estou com um problema....
Eu testei este tuto no firefox e no IE, no FF funciona lindo porém no IE ele funcina mas da uma piscadinha no menu que esta abrindo e no que esta aberto.
Sera que isto esta acontecendo só comigo?!?!?

Vc poderia me dar um help quanto a isto?!?!?

Value
Micox - Náiron J. C. G. disse... 18 Fevereiro, 2008 12:59: Não é só com você não Valentim.
É bug do hide/show do jquery.
Phylipe Venancio Soares disse... 12 Março, 2008 18:33: Bem legal, esse tutorial seu será muito util no meu novo projeto, ja utilizava o Jquery antes, com o plugin masketinput e rouded corners....

Vlw, grande abraco
Vilmondes disse... 27 Maio, 2008 16:11: Como ficaria o código para mouseover \ mouseout ?

eracton@gmail.com

vlw!
Rubiz disse... 06 Junho, 2008 17:03: Esse post eu já tinha visto do original, é um script muito legal e limpo, eu nem conhecia dl, dt, dd, achei uma estrutura muito boa!! a diferença de ul/ol li é que, além de vc não ter bullets, é q vc pode definir títulos.

Olha só a treta desse accordion é que quando clicamos, ele dá uma subidinha de leve no anterior... acho isso mal... fica um efeito visual legal emboa com uma "estranheza"...

Se desse pra alinhar isso e quando clicasse em um não subisse os outros, seria perfeito!!
Samuel disse... 20 Agosto, 2008 10:01: é possivel qdo vc clike no link, na pag fike aberto o submenu clikado?

se sim, como ?
Felipe Santi disse... 24 Setembro, 2008 11:54: Galera, e se o meu menu, não for todo com sub itens?
Explico, por exemplo, eu tenho vários itens (principais) e apenas 3 deles teem sub-itens, até ae tudo bem, soh estes abrem e fecham. O problema, é que ao menos aqui, não consegui fazer com que os outros itens funcionem como links normais. Eles ficam sem função. Apenas fecham o menu aberto, mas não fazem o link com outras páginas.
Micox - Náiron J. C. G. disse... 24 Setembro, 2008 13:01: Olá Felipe, sua solução está aqui: http://forum.ievolutionweb.com/index.php?showtopic=17800
Osmair F disse... 28 Novembro, 2008 13:36: e como faria para ao clicar pela segunda vez o menu se fechasse novamente.
Thelon disse... 05 Fevereiro, 2009 13:45: @Osmair F

Sua resposta está nesse link:

http://forum.webly.com.br/index.php?showtopic=25659
Thelon disse... 09 Fevereiro, 2009 10:01: RESPOSTAS !

Eu vi que não só eu como mais pessoas precisaram fazer ele abrir e fechar clicando 2 vezes.

E fazer um link sem sub-menus.

Como as respostas estão em links separados e muitos tem preguiça de ler vou facilitar quem precisar dos 2 juntos o código fica assim:

$(document).ready(function(){
$("dd:not(#dd_open)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");

var prox = $(this).parent().next()
if(prox[0].nodeName=='DD'){
$(this).parent().next().not(':visible').slideDown("fast");
return false;
}
var back = $(this).parent().back()
if(prox[0].nodeName=='DD'){
$(this).parent().back().slideUp("slow");
return false;
}
});
});
Marcello Prince disse... 04 Março, 2009 09:50: Show de bola Micox parabéns pelotuto, me desculpe se não prestei a atenção nos posts anteriores mas eu tenho a mesma duvida do SAMUEL, como faço para deixar o menu e o sub menu aberto na pagina que estou navegando?
Anônimo disse... 13 Março, 2009 01:00: Olá,

show esse menu sanfona!
seguinte: ao abrir no FF ele fica todo alinhado a esquerda, mas quando abre no IE os sub-itens ficam alinhados como se tivesse uma margin-left... como corrigir isso?

Escreva seu comentário (Leia abaixo).

Deixe seu email se quiser resposta por email também, pois o sistema de comentários do Blogger não me informa :( ... Ah, também pode deixar o endereço do seu blog ou site no comentário.
Já estou em outro sistema de blog melhor (wordpress). Se quiser comentar lá também :)
Dúvidas, só no fórum Webly.