Este artículo ha sido consultado en 1,273 ocasiones.

Por: Dargor <dargor@nediam.com.mx>
Fuente: Nediam.com.mx

En este tutorial voy a explicar como hacer menús con submenús como éste, o con varios niveles de submenús como éste. 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. Siguiendo el ejemplo mostrado, el html sería el siguiente, lo que desplegaría esto. 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>
				<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-family: 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 (si quieren saber más de esta propiedad revisen la documentación de css haciendo click en esta liga). Juntando este código, y siguiendo con nuestro ejemplo, el código html quedaría así, lo que desplegaría esto.

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:

/* Comienza clase .menuitem */

.menuitem
{
	position: absolute;
	margin: 0;
	padding: 0;
	width: 10em;
	height: 1.4em;
	overflow: hidden;
}

.menuitem ul
{
	padding: 0;
	list-style-type: none;
}

.menuitem:hover { overflow: visible; }
/* termina clase .menuitem */

/* Comienza posicion horizontal de cada opcion del menu principal */
#m1 { left: 0; }
#m2 { left: 9.95em; }
#m3 { left: 19.85em; }
#m4 { left: 29.80em; }
#m5 { left: 39.75em; }
/* termina posicion horizontal de cada opcion del menu principal */

Lo interesente de las reglas anteriores es la propiedad overflow, que nos servirá para ocultar los submenus (overflow: hidden) y hacerlos visibles cuando el mouse pase por alguna de las opciones (overflow: visible). Ahora bien, para que las opciones del menú principal se desplieguen de manera horizontal utilizamos la regla 'position: absolute' y a cada opción le asignamos un id en el cual especificamos manualmente el offset a la izquierda que tendrá cada opción. En el html, a cada item de la lista principal le tenemos que asignar la clase .menuitem y el id correspondiente. Por ejemplo, para la primera opción del menú principal el html del list item sería: <li class='menuitem' id='m1'>, y para la cuarta opción: <li class='menuitem' id='m4'>. Juntando todo, y siguiendo con nuestro ejemplo, el código html quedaría así, lo que desplegaría esto.

Si ven ya logramos hacer un menú con opciones!! Eso ya es un gran avance. Pero si lo que queremos es tener submenús dentro de las opciones de los submenús, aún nos falta un poco, y que es la parte más interesante de este tutorial :). Si analizan el código del paso anterior, las opciones de los submenús se están desplegando no como subopciones, sino al mismo nivel que las opciones de los submenús principales. Lo que tenemos que hacer es definir que las opciones de los submenús se desplieguen a la derecha de la opción de la que se derivan. Vamos a agregar las siguientes reglas de css:

.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. Si no ponemos esta regla nuestro menú quedaría así. 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 (si quieren saber más de los child selectors revisen la documentación de css haciendo click en esta liga). 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'>. Siguiendo con el ejemplo, el código html quedaría así, y desplegaría esto.

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. Siguiendo con el ejemplo, el html ya con bordes sería éste, y desplegaría esto. 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.

Cualquier duda o comentario enviarlo a <dargor@nediam.com.mx>

Saludos a Kukulkan que fue el primero en mostrarme todo el potencial que tienen las CSS.


Fuentes consultadas:

• Cascading Style Sheets, level 2 - CSS2 Specification - http://www.w3.org/TR/REC-CSS2/
• Petr Stanicek - Hierarchical dynamic menu with CSS - http://pixy.cz/blogg/clanky/csshiermenu/
• Eric A. Meyer - Pure CSS Menus - http://www.meyerweb.com/eric/css/edge/menus/demo.html
• CSS horizontal navigation list - http://www.phoenity.com/newtedge/horizontal_nav/
• Horizontal Drop Down Menus - http://www.alistapart.com/d/horizdropdowns/horizontal2.htm

Última actualización: 2007-04-29 10:57:00-05

scarecrow está:
Du hast?
3 hours, 56 minutes ago

der_teufel está:
Ich habe einen Kater, aber nicht so schlecht...
11 hours, 30 minutes ago

rnstux está:
Y yo un Abrazo.
1 day, 11 hours ago

saidjose está:
Dandole su habrazote a mi santa madre que me soporta
1 day, 13 hours ago

dsquid está:
esperando a que este el pozole
1 day, 14 hours ago

asarch está:
He cambiado NetBSD por Fedora 8, es que era muy "caliente"
2 days, 1 hour ago

Que estuvimos haciendo >>

Consultoría y Soporte