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!

7 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

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário