Criando um menu drop down com jQuery e 3 linhas!

14/05/2009

Olá pessoal,

semana passada lecionei um curso sobre XHTML, CSS e JavaScript na faculdade para o pessoal do primeiro ano. Como eles não sabem programar ainda, resolvi passar um pouco de jQuery ocultando assim muita lógica.

A primeira parte é o XHTML:

TEXTO PURO
HTML:
  1. <p id="menu">&nbsp;</p>
  2.  
  3. <h3>Navegue pelas lojas:</h3>
  5.     <li>
  6. <h4>Livros e Papelaria:</h4>
  8.     <li><a href="#">Livros</a></li>
  9.     <li><a href="#">Livros Importados</a></li>
  10.     <li><a href="#">Papelaria</a></li>
  11. </ul>
  12. </li>
  13.     <li>
  14. <h4>CDS, DVDs e Games:</h4>
  16.     <li><a href="#">Livros</a></li>
  17.     <li><a href="#">Livros Importados</a></li>
  18.     <li><a href="#">Papelaria</a></li>
  19. </ul>
  20. </li>
  21. </ul>

O CSS:

TEXTO PURO
CSS:
  1. <pre>#menu&gt; ul{
  2.   margin: 40px 0 0 10px;
  3.   background: #FFFFFF;
  4.   width: 150px;
  5.   padding: 0;
  6. }
  7. /* mostrando o cursor do mouse como pointeiro */</pre>
  8. <pre>#menu h4{
  9.   cursor: pointer;
  10. }
  11. /* ocultando o menu */
  12. #menu ul li ul{
  13.   display: none;
  14. }</pre>

E o código JS em jQuery:

TEXTO PURO
JAVASCRIPT:
  1. $(function(){
  2. $("#menu&gt; ul&gt; li&gt; h4").click(function(){
  3. $(this).parent().find("ul").toggle("slow");
  4. });
  5. });

Simples né?
Qualquer dúvida comentem! Forte abraço!

13 Comentários

  1. Fábio said,

    Maio 19, 2009 @ 11:27

    Túlio, tudo bem? Você sabe se existe integração do cakephp com um framework para o padrão DAO? Por exemplo, você já utilizou o outlet junto com o cakephp?

  2. Rick said,

    Maio 28, 2009 @ 12:46

    Kra não funciono d jeito nenhum.
    coloquei o jquery, até testeio para ver c não erra isso..
    mas não..
    nao tertorna erro no firebug, resumindo não faz nda..
    :S

  3. Léo (Scoup) said,

    Junho 26, 2009 @ 02:30

    Olá, eu to com a mesma dúvida do Fábio. Será que teria como mostrar um exemplo de integração com o cakephp?
    Eu vi um exemplo: http://blogs.bigfish.tv/adam/2008/02/12/drag-and-drop-using-ext-js-with-the-cakephp-tree-behavior/
    Testei aqui mas achei meio bugado.
    Minha curiosidade é como informar ao cake a ordem atual para poder fazer o action :P
    Abraço

  4. Lucas Saliés Brum said,

    Junho 29, 2009 @ 08:26

    O que faz esse código?

  5. borg said,

    Setembro 14, 2009 @ 13:28

    já que o autor não teve nem a capacidade de testar o que postou eu coloco o script de forma correta, se aceitar html na mensagem:

    obs: caso não apareça o código troquem o '' por '' e no final do código fechem a 'div' com ''. Retirem o '' dos estilos e retirem o '>' também onde aparece, aí funciona.

    exemplo corrigido:

    $(function(){
    $("#menu ul li h4").click(function(){
    $(this).parent().find("ul").toggle("slow");
    });
    });

    #menu ul{
    margin: 40px 0 0 10px;
    background: #FFFFFF;
    width: 150px;
    padding: 0;
    }
    #menu h4{cursor: pointer;}
    /* ocultando o menu */
    #menu ul li ul{
    display: none;
    }

    Navegue pelas lojas:

    Livros e Papelaria:

    Livros
    Livros Importados
    Papelaria

    CDS, DVDs e Games:

    Livros
    Livros Importados
    Papelaria

  6. borg said,

    Setembro 14, 2009 @ 13:30

    como expliquei não pegou o html no exemplo, mas copiem a parte do javascript e os estilos css trocando o p por div que vai funcionar, só não esqueçam de fechar a div no final do código html.

  7. Lia said,

    Outubro 22, 2009 @ 10:07

    rejeitado só pq não tem link de demonstração

  8. Pindureta said,

    Março 20, 2010 @ 19:39

    Faltou o link de demo.

  9. Hugo said,

    Março 29, 2010 @ 14:32

    muito bom!
    agora eu queria saber se tem como deixar esse menu horizontal?

  10. Bruno Pulis said,

    Abril 28, 2010 @ 18:40

    Cara eu que apanhei pra fazer menu dropdown na mao, agora vou fazer com JQuery valeu pela dica Túlio. =D

  11. Diogo said,

    Agosto 10, 2010 @ 22:47

    Olá Túlio,

    Será que você poderia me dar uma ajuda. Comecei a desenvolver algumas coisas com jquery e CSS, aproveitei o processo de aprendizado para por a mão na massa. Desenvolvi o site da minha banda.
    Estou com uma dúvida, fiz um menu drop-down em linha horizontal, achei bacana o estilo, mas gostaria que os links seguissem o botão do menu, sem alterar o tamanho da barra do menu drop-down. Tem como?
    Se quiser dar uma olhada no site: www.darkhound.com.br
    Seria muito grato se pudesse ajudar.

  12. José Eduardo said,

    Setembro 6, 2010 @ 21:30

    Olá Túlio,

    Gostaria de agradecer pelo tutorial, utilizei o código javascript e funcionou perfeitamente, obrigado me ajudou bastante.
    Abração

  13. Fernado Sampaio said,

    Outubro 1, 2010 @ 20:04

    Legal cara.
    Uma dica nada a ver.
    No teu curriculo em ingles, você colocou que "My main focus is in web programmer and web design." quando na verdade deveria ter posto "My main focus is in web programmING and web design." É uma coisa besta mas que pode passar muitas impressões.
    Abraço.

RSS feed for comments on this post · URI do TrackBack