Código listo para hacer un menú desplegable con XHTML y CSS

Con la finalidad de conseguir efectos visuales dinámicos y atractivos, los diseñadores en muchas oportunidades empleamos lenguajes propicios para ello, como Javascript, y en otras ocasiones recurrimos a animaciones, como Flash.

En sí mismo, esto no es ningún inconveniente. Sin embargo, la mayoría de los usuarios de internet cuentan con navegadores que, en pos de conseguir una mayor seguridad, bloquean muchos scripts. Otro de los inconvenientes que puede surgir, es relativo al peso de las animaciones hechas en Flash.

Por estas razones, hemos decidido mostrar un recurso muy podo empleado, y es la utilización de XHTML (o HTML) y CSS para la creación de menús complejos formados por varios submenús.

Así mismo, en lawebera.es también hemos publicado otros artículos sobre creación de menús, puedes encontrarlos aquí: diseño de menús ys submenús con CSS, menú desplegable con CSS y HTML,  menu rollover con CSS y una sola imagen.

Sub-utilización de las posibilidades de CSS

Una vez que hemos finalizado de aprender como ubicar unos contenedores en una página web y a darle las propiedades a los elementos que componen una página, creemos que ya sabemos todo lo relativo a este maravilloso lenguaje. Sin embargo, muchas de las etiquetas ni siquiera hemos aprendido para que sirven.

Esta sub-utilización hace que en muchas ocasiones recurramos a formas más complejas de desarrollo, cuando con el empleo de ciertas técnicas de los lenguajes que ya conocemos, se consiguen efectos muy similares y que resultan más compatibles con todos los navegadores, no requieren de instalación de plugins por parte de los usuarios ni hace ralentizar el acceso a la página.

Descripción de la técnica empleada para el desarrollo del menú

En forma somera, podríamos decir que se trata de la utilización de una etiqueta CSS poco usada por los desarrolladores: visibility. Esta etiqueta define solo si la capa o el objeto están visibles o no. Sus posibles valores son visible, hidden y collapse. La primera indica que el elemento marcado con este valor es visible, mientras que la segunda indica que el objeto no es visible. Collapse se emplea en tablas, por lo que la utilización en otro tipo de elementos es igual a hidden.

El truco con el que se desarrolla este menú consiste en ubicar un submenú que tenga la propiedad visibility con el valor hidden, y que cuando se pase el puntero del ratón por encima del botón ubicado encima del submenú, la propiedad visibility pase a visible a través de la utilización de la pseudoclase :hover, que hace que el elemento varíe en sus propiedades CSS en cuanto se pasa el puntero por encima.

Página de ejemplo

Para comprender completamente el funcionamiento de este tema, hemos creado una pequeña página web de ejemplo, la cual pueden descargar desde esta página. Así mismo pueden ver el resultado desde aquí: ver el menú desplegable de ejemplo.

Contenido:

• Una carpeta contenedora llamada “menú”.
• Un archivo HTML llamado “ejemplo.html”.
• Un archivo CSS llamado “estilo.css”.
• Una carpeta nombrada “img” conteniendo las imágenes empleadas en la página.

Contenido de la carpeta “img”:

• 12 imágenes JPG
• 5 imágenes PNG

Todo esto está comprimido en un archivo .rar que pesa 98.9 Kb, mientras que el contenido luego de descomprimir es de 153 Kb.

Tras la descarga, descomprimir el archivo, abrir la carpeta “menú” y ejecutar el archivo “ejemplo.html”. Para abrir los archivos HTML y CSS, puede emplearse un editor de texto plano.

Descripción del menú

Botones visibles

El menú está definido en el archivo HTML en las etiquetas <div> que tienen los siguientes identificadores y clases:

• Id=”botonera” – Es la capa que contiene todos los botones del menú que siempre está visible.
• class=”boton” – Cada uno de los cinco botones que componen el menú.
• Listas no ordenadas. Cada uno de los ítems de las listas, es uno de los enlaces que componen los menús desplegables.

La parte que siempre está visible del menú, se define en el archivo CSS mediante:

• #botonera, que contiene las propiedades de la capa contenedora de los botones.
• .boton, que define las características de los botones visibles.
• .boton:hover, que define el comportamiento de los botones visibles cuando pasamos el puntero por encima.
• .boton a, para definir las características del texto con enlaces de los botones visibles.
• .boton a:hover, igual que el anterior, pero cuando se pasa el puntero por encima.

Hasta aquí, todo es sencillo y normal. Se trata del desarrollo de un contenedor, unas capas flotantes a la izquierda (los botones), que tienen un texto enlazado en su interior, que se modifica cuando el puntero pasa por encima.

El “menú emergente”

El menú emergente no es más que unas capas no visibles que, cuando se pasa el puntero por el botón se hacen visibles. ¿Cómo es posible esto?

El concepto es bastante elemental y está dentro de las características fundamentales de las Hojas de Estilo en Cascada. Las características de los elementos se heredan. Esto quiere decir que un elemento contenido (hijo) dentro de otro, heredará las propiedades del elemento contenedor (padre).

Como habrán podido ver, dentro de cada uno de los botones aparece una serie de elementos: textos, enlaces, listas y una capa, sin identificador ni clase. Todos estos elementos, heredan las características del elemento padre (.boton), y todos los eventos que sucedan en él podrán tener consecuencias en los elementos hijos.

Veamos ahora como están descritos en el archivo CSS estos elementos dependientes de la clase .boton:

• .boton div (cualquier div que se encuentre dentro de un elemento clase boton) – Esta capa, tiene como finalidad establecer las características de la “capa invisible” que contiene todos los demás elementos. No tiene identificador (que podría tenerlo) porque no es necesario identificarla.
• .boton:hover div (igual que el anterior, pero cuando el puntero se encuentra sobre el botón o cualquiera de los elementos contenidos en él)
• .boton ul (listas contenidas dentro de los elementos de clase boton)  – Se definen aquí las características de los elementos contenidos en las listas.
• .boton li a (cada uno de los ítems de la lista con enlace)
• .boton li a:hover (igual al anterior pero cuando el puntero pasa por encima)

Funcionamiento

1. Para que la capa “invisible-visible” se ubique en la posición que se encuentra cuando pasamos el puntero por encima del botón, a la capa que se encuentra dentro del botón (.boton div) hay que asignarle una posición fija. Para que se posiciones exactamente debajo del botón (que es su padre), le fijamos un “position: relative”, con lo que los valores de top: y left: (que por no estar descriptos tienen valor 0). Si le diéramos un “position: absolute”, los valores de top y left serían respecto del body, con lo que sería muy complejo de ubicar las capas invisibles para diferentes resoluciones de pantalla.
2. Cuando el puntero pasa por encima del botón, el div contenido en él (.boton div) adquiere el valor contenido dentro de “.boton:hover div”, que es donde se indica que la capa se hará visible. Pero si movemos el ratón hacia abajo y lo posamos sobre los elementos del menú emergente, la capa no desaparece. Esto se debe a que al definir la visibilidad en “.boton:hover div”, mientras el puntero se encuentre dentro del div mensionado o dentro de cualquier elemento “.boton”, esta capa será visible.

Y nada más. Como pueden apreciar, el funcionamiento de este menú está relacionado con elementos de CSS avanzado, pero que no son difíciles de entender. La forma más sencilla de entenderlo todo, es tomar los archivos, modificarlos y “jugar” con ellos para que podamos ir comprendiendo como funcionan y para que sirven cada uno de los elementos definidos.