Diseño de menus y submenus con CSS

En este tutorial voy a explicar como hacer menús con submenús como éste, es decir, vamos a ver como hacer menus desplegables o multinivel con CSS y HTML.

A nivel de html, las opciones principales del menú son items de una lista desordenada (unordered list), y los submenús son a su vez listas desordenadas.

Vamos primero a escribir el html sin las reglas de css. Si analizan detenidamente el código html verán que todo el menú está dentro de una lista <ul>, y cada opción principal es un list item <li>, el cual a su vez contiene otra lista <ul> con las subopciones, y así sucesivamente. La clave está en que la lista <ul> correspondiente a un submenú debe de estar dentro de un list item <li>, es decir, los tags <ul> … </ul> de la lista que corresponden a un submenú deben de estar antes del tag que cierra el list item </li> de la opción:

<ul><li><a href='#'>Opción 3</a>

<ul>

<li><a href='#'>Subopción</a></li><li>

<a href='#'>Subopción</a></li>

<ul> <li><a href='#'>Algo más</a></li>

<li><a href='#'>Algo más</a></li></ul>

</li><li><a href='#'>Subopción</a></li>

<li><a href='#'>Subopción</a></li></ul>

</li></ul>

Ahora agregamos estas reglas de css:

<style type="text/css"> #menu

{

position: relative;

list-style-type:none;

}#menu a{

font-famiy:Arial,sans-serif;

font-size:11pt;

color: #369;display: block;

padding:0.2em 0.5em;

text-align:center;

text-decoration: none}

#menu a:hover{

background-color: #4487C2;

color:#FFF;

}</style>

Estamos definiendo el id menu que asignaremos a la lista principal que contiene todas las opciones y demás submenús. Especificamos que los items no tengan viñetas u otro estilo (list-style-type:none), y en la pseudo-clase hover definimos que cambie el color del fondo y de letra. También hay que resaltar que en el selector a estamos especificando la propiedad display.

Ya se ve un poco mejor, sin embargo los items de todas las listas están desplegados de manera vertical (que es el default). Lo que haremos ahora será especificar que los items de la lista del menú principal se desplieguen de manera horizontal. Esto lo haremos definiendo una clase que llamaremos menuitem y algunos ids que serán en los que especificaremos la posición absoluta en la que queremos que se despliegue cada una de las opciones del menú principal:

.submenu li {position:relative}

.subsubmenu

{

position: absolute;

top: 0;

left: 9.95em;

width: 10em;

display: none;

}

.submenu li:hover >

.subsubmenu{

display: block;

}

En la primera regla definimos que la posición será relativa para los elementos <li> que estén contenidos dentro de un elemento que tenga la clase submenu (que en nuestro caso serán los elementos <ul class=’submenu’>). Esto nos sirve para que los menús de los siguientes niveles de submenús se desplieguen a la misma altura que se encuentra la opción del menú al que pertenecen. Después de esto, definimos la clase .subsubmenu, en donde especificamos, entre otras cosas, que la posición será absoluta con relación al elemento que lo contiene (que en nuestro caso seran los elementos <li> que a su vez están contenidos en los elementos <ul class=’submenu’>), y definimos su offset a la izquierda. En la tercer regla definimos la pseudo-clase hover para que al pasar el mouse por una opción que tenga submenús los despliegue. Chequen que esta regla de css se aplicará a los elementos que tengan la clase .subsubmenu y que sean hijos de un elemento <li>, los cuales a su vez deben de tener o pertenecer a un elemento que tenga la clase .submenu. A nivel de html, a cada lista de los submenús principales que vayan a contener uno o más niveles de submenús se le tiene que asignar la clase submenu: <ul class=’submenu’>, y a las listas que contengan las opciones de los submenús se les tiene que asignar la clase subsubmenu: <ul class=’subsubmenu’>.

Ahora sí ya tenemos un verdadero menú con varios niveles de submenús. Lo que resta es ponerle bordes para que se vea más presentable. Le estuve checando y probando, y la manera como me funcionó esto de los bordes es de una manera artesanal, con este código de css:

.b_top {border-top:1px solid #369}

.b_right {border-right:1px solid #369}

.b_bottom {border-bottom:1px solid #369}

.b_left {border-left:1px solid #369}

A cada opción del menú, dentro del elemento <a> le asignamos las clases que necesitemos separadas por espacios. Por ejemplo, para la segunda opción del menú principal el html quedaría: <a class=’b_top b_right b_bottom’ href=’#'>, y para una opción que a nivel de diseño sea la última de la lista: <a class=’b_right b_bottom b_left’ href=’#'>. Esto es un poco tedioso, pero generalmente sólo lo tendremos que hacer una vez al realizar el diseño del menú, ya que después de que esté funcional, las modificaciones serán mínimas, quizás al aumentar una nueva opción, o un nuevo submenú, dependiendo de las necesidades que surgan. Yo tuve algunos problemas para que todos los bordes se vieran alineados, porque algunos en lugar de que se sobreescribieran, a nivel de diseño se veían más gruesos; es por eso que tuve que jugar con las posiciones absolutas de los id #m.

Así termina este tutorial, espero que les sea de utilidad. Ah, se me olvidada comentar, con MS IExplorer no va a funcionar porque este browser no tiene soporte total de CSS2, podría funcionar con algunos truquitos y simulando el efecto hover de los list items con Javascript, pero mejor utilicen un browser que cumpla con los estándares, tal como Mozilla, Firefox, Netscape, Opera, etc.

Puedes ver también: menu desplegable con CSS y HTML.