tadarank afiliados

02 abril, 2007

Accordion Menu (menu sanfona)

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 :-)

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

37 comentários:

  1. 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!

    ResponderExcluir
  2. 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.

    ResponderExcluir
  3. 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...

    ResponderExcluir
  4. @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

    ResponderExcluir
  5. 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ê.

    ResponderExcluir
  6. Ai meu velho manero esse lance ai
    do jquery aonde e departamento de sugestao de materias ????

    henrique

    ResponderExcluir
  7. @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.

    ResponderExcluir
  8. Puxa!!!
    Legal
    Parabêns aí MICOX.
    Não conhecia o jQuery!!!
    Ele é bom mesmo.

    ResponderExcluir
  9. poxaaa legal a jQuery
    mai estou tendo problemas com acentuação ...vc sabe como resolver???

    ResponderExcluir
  10. 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.

    ResponderExcluir
  11. Show de bola micox!

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

    seria pseudo-classes do seletor css2 ?

    ResponderExcluir
  12. 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

    :)

    ResponderExcluir
  13. Este comentário foi removido pelo autor.

    ResponderExcluir
  14. 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.

    ResponderExcluir
  15. 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

    ResponderExcluir
  16. 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.

    ResponderExcluir
  17. 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

    ResponderExcluir
  18. Não é só com você não Valentim.
    É bug do hide/show do jquery.

    ResponderExcluir
  19. 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

    ResponderExcluir
  20. Como ficaria o código para mouseover \ mouseout ?

    eracton@gmail.com

    vlw!

    ResponderExcluir
  21. 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!!

    ResponderExcluir
  22. é possivel qdo vc clike no link, na pag fike aberto o submenu clikado?

    se sim, como ?

    ResponderExcluir
  23. 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.

    ResponderExcluir
  24. Olá Felipe, sua solução está aqui: http://forum.ievolutionweb.com/index.php?showtopic=17800

    ResponderExcluir
  25. e como faria para ao clicar pela segunda vez o menu se fechasse novamente.

    ResponderExcluir
  26. @Osmair F

    Sua resposta está nesse link:

    http://forum.webly.com.br/index.php?showtopic=25659

    ResponderExcluir
  27. 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;
    }
    });
    });

    ResponderExcluir
  28. 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?

    ResponderExcluir
  29. 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?

    ResponderExcluir
  30. Opa! valeu galera!
    só uma coisa, onde eu coloco essa li nha de referência ao arquivo externo no meu código? Ele não tá reconhecendo o Jquery, to rodando o .html numa pasta onde tbm tem o arquivo do jquery, e colocuqie a linha de referÇencia dentro do body, do head ou até mesmo antes dele, nada funciona...

    ResponderExcluir
  31. Se estiver rodando localmente E no IE não vai funcionar por causa do bloqueio do IE. Tenta colocar online ou então testar no firefox.

    ResponderExcluir
  32. Alguém sabe resolver aqle problema, q ao fechar o menu no IE, ele da aqla 'piscada'? :S

    ResponderExcluir
  33. Muito bom, queria saber se tem como eu manter uma das listas abertas quando abre a página?

    http://joaopedrorosa.blogspot.com

    ResponderExcluir
  34. When i click "My computer" only apple iphone pictures show up and not the hardrive itself. I have the latest itunes and updates for my phone, but it's not recognizing the hardrive. What can i do to make my computer recognize the iphone 3g hardrive? I know you can because i did it on my other computer simply by plugging it in, but this one doesn't work.



    ________________
    [url=http://unlockiphone22.com]unlock iphone[/url]

    ResponderExcluir
  35. I want to quote your post in my blog. It can?
    And you et an account on Twitter?

    ResponderExcluir
  36. Olá!
    Eu criei o menu e funcionou, ficou muito legal!

    Só que não estou conseguindo fazer com que abra uma página quando clico no ítem que abre os subitens, ele apenas exibe o subitens na forma de acordeon. Será que expliquei bem?
    Os subitens estão abrindo as páginas normalmente. O item que não abre página, apenas ativa o efeito.

    abç

    ResponderExcluir
  37. Ola pessoal, eu tentei mudar para mouseover, e da certo porem ele fica se mexendo automatico, e as vezes para, o codigo do script que eu usei foi esse mesmo, porem troquei o click por mouseover.

    Se alguem souber, obrigado!
    xeroxoito@yahoo.com.br

    ResponderExcluir

Resultado! Concursos