Criando um menu drop down com jQuery e 3 linhas!

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:

  1. <p id="menu">&nbsp;</p>
  2.  
  3. <h3>Navegue pelas lojas:</h3>
  4. <ul>
  5.     <li>
  6. <h4>Livros e Papelaria:</h4>
  7. <ul>
  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>
  15. <ul>
  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:

  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:

javascript
< view plain text >
  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 Comment

  1. Fábio says:

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

    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 😛
    Abraço

  4. O que faz esse código?

  5. 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. 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. rejeitado só pq não tem link de demonstração

  8. Pindureta says:

    Faltou o link de demo.

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

  10. Bruno Pulis says:

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

  11. 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: http://www.darkhound.com.br
    Seria muito grato se pudesse ajudar.

  12. 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 says:

    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.

Comentários fechados.