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!

Comentários (7)