1 Creación de menús utilizando JavaScript.

Este tipo de menús son muy habituales en la red, aunque con la paulatina adaptación a los estándares W3, su uso irá reduciéndose hasta su más que probable desaparición. Sin embargo seguirán usándose en aquellos casos en los que queramos conseguir efectos de deslizamiento o movimiento, es decir cuando los distintos elementos del menú se muevan por la pantalla o cuando uno se desliza por detrás de otro. Esto foma parte de lo que se conoce por HTML Dinámico, gran parte de los efectos de movimiento logrados con DHTML han venido siendo remplazados por el uso de Flash en los sitios web.

En estos apuntes o tutorial voy a explicar como realizar un menú desplegable y otro deslizable que funcionen en IE6 y superiroes y en Mozilla FireFox. Durante mucho tiempo las diferencias entre los distintos navegadores hacía necesario detectar el tipo de navegador y utilizar distinto código Javascript para cada uno de ellos. Para las versiones que nosotros consideramos esto ya no es necesario para hacer menús como los aquí explicados. Actualmente un 98% de los internautas utilizan IE6 o superior o Firefox, con lo cual soy de la opinión de que debemos de abandonar el uso de códigos para versiones obsoletas de los diferentes navegadores.

2 Menú horizontal con varios niveles.

Se trata de realizar el típico menú que al elegir una opción se despliega un submenú y dentro de este puede haber, o no, otros submenús que también se despliegan.

Para realizar esto tenemos muchas posibilidades de hacerlo, pero siempre usando CSS ya que es el manejo de sus propiedades lo que nos permitirá hacer aparecer o desaparecer los menús.Dentro de estos métodos quizás el más utilizado y fácil de compreder sea la que utiliza capas "div" como elementos que contienen las opciones de los menús.

Dado que utilizamos Javascript para presentar las diferentes opciones del menú ya no estamos siguiendo las normas de accesibilidad WAI, por lo que tampoco necesitamos utilizar listas para crear los enlaces del menú y podemos sutituir estas por tablas que son más fáciles de montar. No obstante se pueden utilizar listas dentro de los divs. De hecho vamos a partir del menú horizontal hecho con listas en los apuntes menús básicos con listas y css y a partir de él y utilizando capas crearemos los submenus. Este menú lo colocaremos en una capa que en el ejemplo llamaremos principal.

Para continuar debemos definir las capas que contendrán los enlaces de los submenús, a estas capas les pondremos un nombre para identificarlas en este caso las llamaremos menu1, menu2, menu3 y menu4. Primero haremos los menús de primer nivel y cuando estos estén terminados y funcionen procederemos a crear algún submenú.

1.- Dentro del body del documento creamos las capas mencionadas anteriormente y dentro de ellas mediante listas pondremos los enlaces correspondientes (recordar que se pueden usar tablas en lugar de listas si os resulta más fácil). Las capas, al ser este un ejemplo, van a ser iguales y los enlaces no van a enlazar a ninguna página, así podremos copiar el código tal cual cambiando sólo en texto de los enlaces para distinguirlos.

El código para cada capa será.

Si os fijais es el mismo que usamos en menús básicos con listas y css sólamente que le hemos añadido la capa que lo contiene.

Creamos las otras tres capas y una vez hecho definimos los estilos css de las mismas.

2.- Creamos los estilos #menu1 #menu2 #menu3 y #menu4. Que serán iguales, sólo variará su posición para que coincida debajo del elemento del menú horizontal correspondiente. El código de estilo css que utilizaremos en este ejemplo es el siguiente.

El ancho coincide con el de los elementos del menu principal, para colocarlo en su lugar utilizamos posicionamiento absoluto (position:absolute;) la propiedad left para el primero será 0 y a los demás deberemos sumarle el ancho de las capas, en este caso 120px, en cuanto a la propiedad top tendrá que ser igual al alto de la capa principal en todos los menús, es decir 26px para nuestro ejemplo.

Para que el posicionamiento funcione bien, todo el menú estará en una capa, que yo he llamado menu. Esta capa sirve para como en este caso poder centrar el menu en la ventana y evitar problemas con los submenus, aunque hay diversas maneras de colocar el menú, alineado a la izquierda de la página o que ocupe todo el ancho de la pantalla. En este caso optamos por este sistema y para centrarlo utilizamos uno de los métodos explicados en maquetar una página con capas y css y en el ejemplo utilizamod el siguiente estilo css:

De momento tenemos una capa menu que contiene las capas principal, menu1, menu2, menu3, menu4. De la que vamos construyendo un menú es necesario ver los submenus para colocarlos en su sitio por lo tanto se recomienda no especificar la propiedad visibility de las capas menu1,menu2,menu3,menu4 etc. hasta que se hayan colocado correctamente.

3.- Una vez correctamente colocados los menús emergentes vamos a escribir el código JavaScript necesario para manejarlos. Vamos a utilizar el código más simple posible y a mi modo de ver más fácil de entender.

Lo que queremos hacer es que cuando situemos el ratón sobre (también puede hacerse al hacer click) los enlaces del menú principal se vea el menú correspondiente y al situar el ratón fuera o lo que es lo mismo sobre otro enlace que el menú que se estaba viendo desaparezca. Para esto vamos a crear dos funciones, muy pero que muy básicas, las cuales nos servirán una para ocultar y otra para mostrar la capa que queramos.

4.- Definimos el script en la cabecera del documento utilizando la etiqueta <script> como se muestra a continuación.

Nuestras funciones requieren un parámetro (kpa) que es el nombre de la capa que queremos ocultar o mostrar. Las funciones simplemente seleccionan el elemento de la página por su "id" mediante el método getElementById() para modificar el valor de la propiedad visibility de esa capa seleccionada, según convenga. No necesitamos más funciones ni más código, sólo nos falta añadir los eventos a los enlaces del menú principal y a las propias capas de los menús emergentes.

5.- En cada uno de los enlaces del menú principal vamos a colocar dos manejadores de eventos, uno para cuando situemos el ratón sobre el enlace (onmouseover) y otro para cuando lo retiremos del mismo (onmouseout). El código se puede apreciar en las siguientes líneas.

En negrita podemos observar los controladores de eventos añadidos a los enlaces del menú principal. Vemos como al situar el ratón sobre el enlace (evento onmouseover) llamamos a la función de javascript muestra con el nombre de la capa o menú emergente que queremos ver. Al retirar el ratón (evento onmouseout) llamamos a la función oculta con el nombre de la capa como parámetro.

6.- Ahora necesitamos poner lo mismo en cada una de las capas de los menús para que de esta manera al situar el ratón fuera de ellas se oculten sin necesidad de situarse sobre uno de los enlaces de la capa principal. Veamos el código correspondiente.

Recordad que tenemos que poner lo mismo en las cuatro capas sólo debemos cambiar menu1 por la capa que corresponda en cada caso. Deberíamos tener algo parecido a lo siguiente.