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">
  2. <h3>Navegue pelas lojas:</h3>
  4.     <li>
  5. <h4>Livros e Papelaria:</h4>
  7.     <li><a href="#">Livros</a></li>
  8.     <li><a href="#">Livros Importados</a></li>
  9.     <li><a href="#">Papelaria</a></li>
  10. </ul>
  11. </li>
  12.     <li>
  13. <h4>CDS, DVDs e Games:</h4>
  15.     <li><a href="#">Livros</a></li>
  16.     <li><a href="#">Livros Importados</a></li>
  17.     <li><a href="#">Papelaria</a></li>
  18. </ul>
  19. </li>
  20. </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. juca said,

    Abril 29, 2010 @ 07:32

    n00b

  12. chico said,

    Agosto 10, 2010 @ 16:53

    Nossa, Borg vlw ae, realmente alem de não funcionar, não tem link de demo e ainda é menu totalmente não funcional.

  13. 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.

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário