Hacer un menú desplegable (html+css)

Junio 14, 2010 by admin · Leave a Comment
Filed under: diseño web general, herramientas y utilidades, trucos y consejos web 

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 bién 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):

” <ul class=”menu_color”>

<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>

<li>menu 5
<ul>
<li>menu 5.1</li>
<li>menu 5.2</li>
<li>menu 5.3</li>
</ul>
</li>
<li>menu 6</li>
<li>menu 7</li>

</ul> ”

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

ul.menu_color
{
list-style:none;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
padding-top:4px;
padding-bottom:4px
}

ul.menu_color li
{
display:block;
position:relative;
padding-left:5px;
padding-right:5px;
padding-top:4px;
padding-bottom:4px;
background-color: #ffffff;
}
ul.menu_color ul
{
position:absolute;
left:51px;
top:-1px;
display:none;
list-style:none;

}
ul.menu_color li:hover
{
background:#ffffff;
color:#E55F28;
filter:alpha(opacity=80);
opacity:0.8;
zoom: 1;

}
ul.menu_color li:hover > ul
{
display:block;
width:150px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
left:0px

}

ul.menu_color> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}

ul.menu_color> li:hover > ul /* Solo para los ul debajo de los li de primer nivel. */
{
color:#000000;
background:#ffffff;

}

ul.menu_color > li /* Sólo para li de primer nivel */
{
display:inline;
}

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.

Espero que te sirva de ayuda. Puedes ver ejemplos en http://dissenyaweb.com/es_paginas_web/ejemplos_diseno_paginas_web.html

Tags: