DHTML : Librerías : Menús desplegables

Parte II: Creación de submenús y adaptación del aspecto visual

Ahora vamos a ver cómo conseguir menús a medida. Mediante unos sencillos pasos podrás modificar los colores y fuentes de tus menús para adaptarlos al diseño de tu página. Y si todavía quieres más, verás como es muy fácil crear submenús dentro de tus menús, para facilitar al máximo la navegación por tu sitio web. ¿Estás preparado?

Si todavía no has leido la primera parte de esta explicación, Creación de menús, te reomendamos que lo hagas. En ella se detalla con mayor claridad qué segmentos de código hay que incluir en la página para el la creación de los menús. Te recordamos que la definición de los menús (función onLoad) debe realizarse entre las etiquetas <head> y </head>, y los enlaces que muestran los menús deben ponerse de la forma

<a href="javascript:window.showMenu(window.menu)">

Finalmente, para que los menús funcionen correctamente con la versión 5 del navegador Microsoft Internet Explorer (muy popular últimamente), es necesario añadir entre las etiquetas <html> y </html> el siguiente código:

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

1. Cómo cambiar los colores y la fuentes

La librería menu.js permite modificar ciertos atributos del menú de forma muy simple, accedien directamente a las propiedades del objeto menú. Vamos a verlo con un ejemplo:

<script language="JavaScript1.2">

</script>

Como se observa, este ejemplo añade dos líneas al ejemplo presentado en la primera parte. La primer de las líenas define el color del texto de las etiquetas del menú. La segunda define el color que adquiere el fondo de una opción cuando el puntero del ratón pasa sobre ella. La tercera fila, el color de fondo del menú. Veamos como queda nuestro menú a medida:

Menu A (modificando colores)

Veamos otro ejemplo en el que se cambian las tipografías y los tamaños de letra. Para ello, sólo tenemos que añadir dos líneas al ejemplo anterior:

<script language="JavaScript1.2">

</script>

Y este es el resultado:

Menu B (modificando tipografías)

A continuación mostramos una lista con todos los parámetros definidos y sus valores por defecto. Lo mejor es realizar pruebas con diferentes valores para ver lo que significa cada parámetro y adaptar el diseño de los menús al aspecto visual de tu página:

fontSize = 14
fontWeight = "plain"
fontFamily = "arial, helvetica, espy, sans-serif"
fontColor = "#000000"
bgColor = "#555555"
menuBorder = 1
menuItemBorder = 1
menuItemIndent = 15
menuItemHeight = 20
menuItemBgColor = "#cccccc"
menuLiteBgColor = "#777777"
menuBorderBgColor = "#ffffff"
menuHiliteBgColor = "#bbbbbb"
menuContainerBgColor = "#cccccc"

2. Creación de submenús

Crear submenús dentro de tu menú es realmente sencillo. Basta con definir 2 objetos menú, y asignar uno de ellos (el que se corresponda con el submenú) a una de las etiquetas del otro (que será el principal). Veamos un ejemplo que puede clarificar esto:

<script language="JavaScript1.2">

</script>

Como se aprecia en el ejemplo anterior, el primer elemento del menuC desplegará un submenú, al que hemos llamado submenu1. Este submenú tiene 2 elementos, que podrían, a su vez, estar asociados a otros submenús, aunque en este ejemplo conducen ya a localizaciones concretas. Hay que observar que los submenús deben definirse antes de ser utilizados, por lo que sus líneas de código deben ir delante de las del menú principal.

Una diferencia importante de este ejemplo con respecto a los anteriores es la utilización de etiquetas para referenciarlos. El menuC tiene la etiquieta "Menu C", y el submenu1 tiene la etiqueta "Taller". Estas etiquetas tienen sentido con los submenús, ya que aparecen en la entrada que despliega el submenú.

Veamos como queda el ejemplo anterior:

Menu C (con submenús)

Para que en este ejemplo se muestre correctamente el gráfico de la flecha hacia la derecha que indica que una entrada despliega un submenú, debe incluirse en la misma carpeta donde está la página que contiene el menú una subcarpeta de nombre images con los dos ficheros .gif para crear esta flecha: arrows.gif y arrows2.gif.

Fichero con las imágenes para la flecha de submenús: flechas.zip

3. Conclusión

Como se observa en los ejemplos de esta página, el módulo menu.js nos facilita la creación de menús desplegables facilmente adaptables a las necesidades de nuestra página. Debido a las diferentes implementaciones del DHTML que incluyen los distintos navegadores, la visualización de los menús tendrá ligeras diferencias entre el Navigator y el Internet Explorer, aunque la librería menu.js garantiza compatibilidad con estos navegadores a partir de las versiones 4.x.

Si todavía quieres saber más sobre este módulo, no te pierdas la próxima actualización de {El Código}, en la cual discutiremos aspectos más avanzados de la utilización de sus funciones.

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 }