Vamos a realizar un menú deplegable vertical de una manera muy simple usando HTML, CSS y Javascript con JQuery. El resultado será el siguiente:

Bueno vamos manos a la obra.

Lo primero es crear la estructura del menú creando una lista desordenada:

PLAIN TEXT
HTML:
  1. <ul id="nav">
  2.     <li><a href="#">Link 1</a></li>
  3.     <li><a href="#">Link 2</a></li>
  4.     <li><a href="#">Link 3</a>
  6.     <li><a href="#">Link 3.1</a></li>
  7.     <li><a href="#">Link 3.2</a>
  8. <ul></ul>
  9. </li>

Como véis la intención de esta lista es tener un menú de 1, 2, 3 botones, donde el 3 tiene dos submenus 3.1 y 3.2.

Ahora vamos con el estilo, que lo obtendremos con CSS de la siguiente manera:

PLAIN TEXT
CSS:
  1. #nav, #nav ul{
  2. margin:0;
  3. padding:0;
  4. list-style-type:none;
  5. list-style-position:outside;
  6. position:relative;
  7. line-height:26px;
  8. }
  9. #nav a:link,
  10. #nav a:active,
  11. #nav a:visited{
  12. display:block;
  13. color:#FFF;
  14. text-decoration:none;
  15. background:#444;
  16. height:26px;
  17. line-height:26px;
  18. padding:0 6px;
  19. margin-right:1px;
  20. }
  21. #nav a:hover{
  22. background:#0066FF;
  23. color:#FFF;
  24. }
  25. #nav li{
  26. float:left;
  27. position:relative;
  28. }
  29. #nav ul {
  30. position:absolute;
  31. width:12em;
  32. top:26px;
  33. display:none;
  34. }
  35. #nav li ul a{
  36. width:12em;
  37. float:left;
  38. }
  39. #nav ul ul{
  40. width:12em;
  41. top:auto;
  42. }
  43. #nav li ul ul {margin:0 0 0 13em;}
  44. #nav li:hover ul ul,
  45. #nav li:hover ul ul ul,
  46. #nav li:hover ul ul ul ul{display:none;}
  47. #nav li:hover ul,
  48. #nav li li:hover ul,
  49. #nav li li li:hover ul,
  50. #nav li li li li:hover ul{display:block;}

Ahora sólo faltará la parte Javascript y donde hacemos la mención a JQuery. Todo este código lo pondremos entre las etiquetas HEAD:

PLAIN TEXT
JavaScript:
  1. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  2. <script type="text/javascript"> function showmenu(){ $("#nav li").hover(function(){ $(this).find(\'ul:first\').css({visibility:"visible", display:"none"}).show(); }, function(){ $(this).find(\'ul:first\').css({visibility:"hidden"}); }); }
  4. $(document).ready(function(){ showmenu(); }); </script>

Una vez hechos estos pasos, sólo queda que modifiques el código a tu gusto, como por ejemplo las CSS para ponerles colores distintos, otras fuentes, etc ...

Demo Menu Vertical Desplegablea

como es normal ya, esto en IE6 no funciona, pero me niego a seguir codificando para este pésimo navegador. Si alguno de vosotros tenéis la solución y la queréis poner en comentarios, bienvenido sea, pero a mi en particular me tiene un poco cansado Internet Explorer 6 (asi apoyo un poco a la causa de "Internet Explorer 6 debe morir")

Vía: Woork

Posts Relacionados