Hacer un menú desplegable (html+css)

Muchas veces nos encontramos con la necesidad de incluir distintos apartados dentro de un mismo elemento del menú,
en estos casos nos puede venir muy bien un menú desplegable que muestre los submenus cuando el cursor pasa por encima del menú.

Es muy fácil hacerlo con CSS, usando las etiquetas  <ul> y <li> anidadas.

Veamos el código HTML que tendremos en nuestra página (index.html por ejemplo):

  1. <ul class="menu_color">
  2. <li>menu 1</li>
  3. <li>menu 2</li>
  4. <li>menu 3</li>
  5. <li>menu 4</li>
  6. <li>menu 5
  7. <ul>
  8. <li>menu 5.1</li>
  9. <li>menu 5.2</li>
  10. <li>menu 5.3</li>
  11. </ul>
  12. </li>
  13. <li>menu 6</li>
  14. <li>menu 7</li>
  15. </ul>

Ahora veamos el código CSS que hará que el menú se despliegue y tenga el aspecto que deseamos:

  1. ul.menu_color
  2. {
  3. list-style:none;
  4. background-color:#ffffff;
  5. padding-left:5px;
  6. padding-right:5px;
  7. padding-top:4px;
  8. padding-bottom:4px
  9. }
  10. ul.menu_color li
  11. {
  12. display:block;
  13. position:relative;
  14. padding-left:5px;
  15. padding-right:5px;
  16. padding-top:4px;
  17. padding-bottom:4px;
  18. background-color: #ffffff;
  19. }
  20. ul.menu_color ul
  21. {
  22. position:absolute;
  23. left:51px;
  24. top:-1px;
  25. display:none;
  26. list-style:none;
  27. }
  28. ul.menu_color li:hover
  29. {
  30. background:#ffffff;
  31. color:#E55F28;
  32. filter:alpha(opacity=80);
  33. opacity:0.8;
  34. zoom: 1;
  35. }
  36. ul.menu_color li:hover &gt; ul
  37. {
  38. display:block;
  39. width:150px;
  40. padding-top:5px;
  41. padding-bottom:5px;
  42. padding-left:5px;
  43. left:0px
  44. }
  45. ul.menu_color&gt; li &gt; ul /* Solo para los ul debajo de los li de primer nivel. */
  46. {
  47. position:absolute;
  48. left:-41px;
  49. top:19px;
  50. display:none;
  51. list-style:none;
  52. }
  53. ul.menu_color&gt; li:hover &gt; ul /* Solo para los ul debajo de los li de primer nivel. */
  54. {
  55. color:#000000;
  56. background:#ffffff;
  57. }
  58. ul.menu_color &gt; li /* Sólo para li de primer nivel */
  59. {
  60. display:inline;
  61. }

Si has puesto correctamente este código en tu página HTML y en tu hoja de estilos CSS, ya tienes un menú desplegable en formato horizontal.

Si quieres darle un aspecto más bonito o acorde con el diseño de tu página, debes modificar el CSS para añadir tus colores, tipografias, etc.

También es posible hacer que el menú se despliegue hacia un lado y no hacia abajo, para ello tendrás que modificar la posición que indica el CSS.

Veamos un ejemplo concreto con su código (catalán):

Se trata del menú de Dissenyaweb.com, concretamente la pestaña de “exemples” donde despliegan 3 elementos hacia abajo.

Este es el código utilizado para pintar el elemento del menú y sus “hijos” que solo serán visibles al hacer un “hover” en el elemento padre:

  1. <div id="desplegable">
  2. <ul>
  3. <li><a href="exemples_disseny_pagines_web.html" title="exemples de disseny web y programació de pí gines web">EXEMPLES</a>
  4. <ul>
  5. <div id="first"><li><a href="pagina_web_basica.html">Web Bí sica</a></li></div>
  6. <li><a href="pagina_web_estandar.html">Web Estandar </a></li>
  7. <div id="last"><li><a href="pagina_web_professional.html">Web Pro</a> </li></div>
  8. </ul></li>
  9. </ul>
  10. </div>

Y este es el CSS que formatea el menú para que tenga un diseño atractivo:

  1. #desplegable
  2. {position:absolute; left: 289px; top: 262px; z-index:30}
  3. #desplegable li
  4. {  margin-top:0px;
  5. padding-top:11px;
  6. padding-bottom:11px;
  7. background-image:url(img_disseny_web/img_menu_pagines_web/boto_gris.jpg);
  8. width:137px;
  9. height:16px;
  10. position:relative;}
  11. #desplegable li:hover
  12. {    background-image:url(img_disseny_web/img_menu_pagines_web/boto_gris_fosc.jpg);
  13. }
  14. #desplegable li li
  15. {  margin-top:0px;
  16. padding-top:11px;
  17. padding-bottom:11px;
  18. /*background-image:url(img_disseny_web/img_menu_pagines_web/boto_gris.jpg);*/
  19. background-image:none;
  20. background-color:#E0E0E0;
  21. width:137px;
  22. height:16px;
  23. border-top:2px solid #FFFFFF;
  24. border-bottom:0px solid #FFFFFF;
  25. border-left:10px solid #FFFFFF;
  26. border-right:10px solid #FFFFFF;
  27. margin-left:-10px
  28. }
  29. #first
  30. { margin-top: -1px
  31. }
  32. #first_vermell
  33. {  margin-top: -1px;
  34. border-bottom:0px solid #FFFFFF;
  35. border-left:10px solid #ffffff;
  36. border-right:10px solid #FFFFFF;
  37. width:137px;
  38. margin-left:-10px;
  39. }
  40. #first_vermell .in_first_vermell,
  41. #first_vermell .in_first_vermell:hover
  42. {background-image:url(img_disseny_web/img_menu_pagines_web/boto_tronja.jpg);
  43. color:#FFFFFF}
  44. #midle_vermell
  45. {  border-bottom:0px solid #FFFFFF;
  46. border-left:10px solid #ffffff;
  47. border-right:10px solid #FFFFFF;
  48. width:137px;
  49. margin-left:-10px;
  50. }
  51. #midle_vermell .in_midle_vermell,
  52. #midle_vermell .in_midle_vermell:hover
  53. {background-image:url(img_disseny_web/img_menu_pagines_web/boto_tronja.jpg);
  54. color:#FFFFFF}
  55. #last
  56. {  border-bottom:10px solid #FFFFFF;
  57. border-left:10px solid #FFFFFF;
  58. border-right:10px solid #FFFFFF;
  59. width:137px;
  60. margin-left:-10px
  61. }
  62. #last_vermell
  63. {  border-bottom:10px solid #FFFFFF;
  64. border-left:10px solid #ffffff;
  65. border-right:10px solid #FFFFFF;
  66. width:137px;
  67. margin-left:-10px;
  68. }
  69. #last_vermell .in_last_vermell,
  70. #last_vermell .in_last_vermell:hover
  71. {background-image:url(img_disseny_web/img_menu_pagines_web/boto_tronja.jpg);
  72. color:#FFFFFF}
  73. #desplegable li a
  74. {color:#000000;
  75. }
  76. /* amagar submenus*/
  77. ul.menu_color
  78. {
  79. list-style:none;
  80. text-align:center;
  81. margin:0px
  82. padding:0px;
  83. }
  84. ul.menu_color ul /* Para todos los ul debajo del ul.menu */
  85. {
  86. display:none;
  87. list-style:none;
  88. margin-left:-40px;
  89. padding-top:10px
  90. }
  91. /* mostrar submenus quan fas hover al li corresponent*/
  92. /* Esto afecta a todos los ul inmediatamente debajo (el > ) de un li que a su vez esté dentro de un ul.menu */
  93. ul.menu_color li:hover &gt; ul
  94. {
  95. display:block;
  96. }

Espero que este ejemplo sea de ayuda, para cualquier duda puedes dejar un comentario a este post

Recuerda que puedes ver ejemplos de páginas web de diseño en Dissenyaweb.com

Esta entrada fue publicada en Diseño web general, Herramientas y utilidades, Trucos y consejos web y clasificada en , , . Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.

13 Comentarios

  1. ross
    Publicado: 14 junio, 2011 a las 19:13 | Permalink

    que tal no entiendo si el primer codigo debe de ir en html y el otro en una hoja css me podrias ayudar para que pueda realizarlo gracias

  2. andres
    Publicado: 25 marzo, 2012 a las 18:15 | Permalink

    hey ross el primero es html y en donde dice menu swon las opciones del menu desplegable y lo otro lo pones tal cual como esta en el css

  3. angelica
    Publicado: 20 abril, 2012 a las 20:14 | Permalink

    hola!
    que tendria q hacer para que el menu sea vertical?

  4. Raúl
    Publicado: 12 mayo, 2012 a las 8:19 | Permalink

    Hola:

    Muchas gracias por compartir tus conocimientos con todos los que damos nuestros primeros pasos en diseño web. Pero querí­a comentarte que no me funciona . He probado hasta incorporar estos códigos en una hoja completamente en blanco (Solo la cabecera head mí­nima). Enlazando a un archivo css con el otro código y hasta incorporandolo en el head de una única página y sigue sin funcionarme.

    Yo pensé que solo era copiar y pegar para que funcionase aunque sea con unos colores preestablecidos. ¿Que más hay que cambiar?.
    Muchas gracias de antemano.

  5. Isabel
    Publicado: 15 junio, 2012 a las 9:58 | Permalink

    ¿Esto se puede hacer en dreamweber? (o como se escriba ;) )

  6. Publicado: 6 julio, 2012 a las 17:18 | Permalink

    hola, andres. no he podido entender nada, y lo que quiero es ponerle un menú a mi página indicada aquí­.
    te ruego una ayuda
    vlado

  7. Publicado: 8 julio, 2012 a las 23:51 | Permalink

    NO FUNCINA MIERDAS!

  8. croninger
    Publicado: 3 septiembre, 2012 a las 5:40 | Permalink

    comoseparo las caracteristicas que aplico a body y que no afecten al menu de navegacion
    gracias
    Codigo

    body{
    margin:100;
    }

    #menuli {
    list-style:none;
    padding:0;
    margin: 0% 18% 0% ;
    }

    #menuli li {
    margin:2px;
    padding:0;
    float:left;}

    #menuli li a {
    display:block;
    width:100px;
    padding:4px 0;
    text-decoration:none;
    text-align:center;
    font-size:12px;
    color:#FFFFFF;
    background-color:#FF0000;}

    #menuli li a:hover {
    color:#99CC00;
    background-color:#003366;
    font-weight: bold;
    }

    a:link {
    color:$linkcolor;
    text-decoration:none;
    }
    a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }
    a:hover {
    color:$titlecolor;
    text-decoration:underline;
    }
    .formato {
    color: #FF2233;
    font-family: Times New Roman;
    }
    .formato {
    float: left; width: 500px;
    }

    Opción 1
    Opción 2
    Opción 3
    Opción 4
    Opción 5
    Opción 6

    Modo de dar color al texto de una pagina web

  9. Publicado: 3 septiembre, 2012 a las 9:29 | Permalink

    Hola Croninger,

    Tienes que crear más clases y asignarlas a los elementos de la página. Por ejemplo, si le das un nombre a tu menú, luego puedes utilizar la clase:

    .nombredelmenu #menu li {
    list-style:none;
    padding:0;
    margin: 0% 18% 0% ;
    }

    Así­ afectará solo a ese menú en concreto.

    Espero que te sirva

  10. D Pablo Rodriguez
    Publicado: 15 septiembre, 2012 a las 14:39 | Permalink

    Algo que por ahí­ no se menciona en el linkear la pag CSS en el HTML…

    /* dentro del head */

    /* no me acuerdo tal cual era, verifiquen */

    Al copiar cosas de internet muchas veces se olvida eso :/ por ahí­ le sirva a alguien…

  11. Publicado: 17 septiembre, 2012 a las 9:02 | Permalink

    Tienes razón Pablo, el código para vincular el archivo CSS seria algo así­:

    Como dice Pablo, tiene que estar dentro del head

  12. Gerardo
    Publicado: 21 noviembre, 2012 a las 3:13 | Permalink

    Saben algoO la netha yo les recomiendoO que mejor hagan el menu desplegable en Dreamweaver cs5 se los recomiendo (Y) solo insertas el menu spray que es el deplegable y automaticamente tambien se te pone el codigoO…

  13. Alvaro
    Publicado: 22 noviembre, 2012 a las 18:04 | Permalink

    no me funciona, no veo el menu horizontal y no despliega los submenus, solo veo las letras negras que pasan a rojas en el hover, que puede ser??

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By: Dissenyaweb.com