DHTML : Librerías : Menús desplegables

Parte I: Creación de menús

A continuación vamos a explicar los pasos necesarios para implementar menús desplegables como los mostrados en el ejemplo de nuestro Taller de DHTML. Todos estos ejemplos están basados en una librería de Netscape, desarrollada por Gary Smith, y que está a disposición de desarrolladores y webmasters para su inclusión en páginas web.

¡Completa estos sencillos pasos y tendrás tu propio menú desplegable!.

1. Enlaza con el módulo menu.js de la librería

El primer paso es enlazar con el módulo .js de la librería desde la página que va a mostrar el menú desplegable. Para ello, descarga el fichero menu.js:

Librería para implementar menús desplegables: menu.js

A continuación copialo en la misma carpeta en la que esté la página que contendrá el menú. Ahora debes añadir la siguiente línea a la página, en la sección de la cabecera (es decir, entre <head> y </head>):

<script language="JavaScript1.2" src="menu.js"></script>

2. Creación del menú

Para crear el menú sólo tienes crear un objeto Menu e invocar el método addMenuItem() que añade elementos al menú. Por ejemplo, para crear un menú de nombre menuA, y añadirle 2 opciones, Taller de JS y Taller de DHTML, se utiliza estas líneas de código:

<script language="JavaScript1.2">
<!--
function onLoad() {
    var menuA = new Menu()
    menuA.addMenuItem("Taller de JS")
    menuA.addMenuItem("Taller de DHTML")
    menuA.writeMenus()
}
//-->
</script>

Este código también debe ir en la cabecera de la página donde se mostrará el menú (entre <head> y </head>).

Como se observa, añadir elementos al menú es tan sencillo como insertar más líneas menuA.addMenuItem().

El ejemplo anterior no añade la funcionalidad esencial de un menú desplegable: enlaces a otras páginas. Para hacer que cuando el usuario pulse sobre la Opción 1 vaya a cierta página hay que añadir un parámetro al método addMenuItem(). El código sería como sige:

<script language="JavaScript1.2">
<!--
function onLoad() {
    var menuA = new Menu()
    menuA.addMenuItem("Taller de JS", "location='../taller.html'")
    menuA.addMenuItem("Taller de DHTML", "location='tallerdhtml.html'")
    menuA.writeMenus()
}
//-->
</script>

3. Visualización del menú

El último paso que tenemos que dar es la inclusión de un enlace que muestre el menú cuando el usuario pulsa sobre él. Para ello, sólo tenemos que añadir la siguiente línea de código en la página donde se va a mostrar el menú:

<a href="javascript: window.showMenu(window.menuA)"> Menú del taller </a>

Como se observa, la visualización del menú se consigue invocando el método showMenu(). A continuación incluimos un ejemplo del menú que acabamos de crear (pulsa sobre el siguiente enlace):

Menu A

4. Adaptación para la versión 5 del Internet Explorer

La versión 5 del Microsoft Internet Explorer no permite que el código DHTML sea creado antes de la etiqueta <body>. Por ello, la llamada a la función onLoad() que crea los menús debe estar entre las etiquetas <body> y </body>. Añadiendo el siguiente código entre estas etiquetas se soluciona el problema:

<script language="javascript1.2">
//CARGA MENUS PARA IE5
if (document.all) {
    onLoad()
}
</script>

5. Conclusión

Como se puede observar, la utilización de la librería menu.js es muy sencilla, y permite añadir vistosos menús desplegables a nuestras páginas de forma simple y rápida. El tamaño de la librería no es excesivo (32 Kb) lo que garantiza una descarga relativamente rápida. Además, como está en un fichero .js externo, el navegador sólo la descargará la primera vez, recuperándola de la memoria caché las sucesivas veces que se utilice.

La librería menu.js incorpora otras muchas opciones (entre ellas, la creación de submenús y la posibilidad de modificacar los colores y tipografías) que explicamos en la segunda parte de este capítulo, Creación de submenús y adaptación del aspecto visual. ¡No te la pierdas!

NOTA:
El código original de este menú desplegable estaba publicado en la página DevEdge, de Netscape. Desde Octubre de 2004, esta web de soporte a desarrolladores ha dejado de estar accesible.

 

{ Menús desplegables }