HTMLpointHTMLpoint HTMLpoint.com


 Menús jerárquicos en cascada 1/3

 por Massimiliano Valente

Un sitio web minímamente complejo necesita, para una navegación ordenada y funcional, un menú que permite al visitante llegar a las diversas secciones con un simple clic del ratón.

Un menú en cascada jerárquica representa la solución más apropiada si bien es, al mismo tiempo, la más difícil de realizar con los instrumentos "canónicos" de HTML. El carácter estático del lenguaje estándar del web no ha permitido hasta ahora la inserción de elementos dinámicos, si no mediante la adopción de controles Active X o Applet Java. Las potencialidades del Dynamic HTML permiten evitar el uso de aplicaciones externas, gracias a la inserción en el documento de sintaxis JavaScript y hojas de estilo en cascada (CSS).

El ejemplo de menú jerárquico en cascada examinado en estas páginas no es ni el único que puede encontrarse en la red ni, probablemente, el más fácil de entener y configurar. Dicha complejidad está justificada por la presencia de código "doble", que hace compatible en ejemplo con las versiones de la cuarta generación de los dos navegadores más difundidos.

HTML 4.0 hace posible reunir la sintaxis JavaScript y el código relativo a las CSS en un archivo externo e independiente del documento, asignándoles una extensión ".js" y ".css". De esta manera, se obtiene una doble ventaja: la estructura del código fuente del documento HTML se aligera y simplifica y, sobre todo, el archivo externo ".js" o ".css" es condividido por varios documentos, los cuales no deberán hacer más que recuperarlo de la caché del navegador. De esta manera, el volumen de transferencia datos que se genera del lado servidor al lado cliente disminuye considerablemente.

Muestra el ejemplo práctico


La estructura del menú gerarchico que vamos a examinar se compone de cuatro file:

  1. menu.htm
  2. menu.js
  3. arrays.js
  4. imagen.gif
El ejemplo tiene como finalidad la realización de un menú que visualice un máximo de tres niveles jerárquicos, pero se pueden agregar o, en su caso, eliminar otros.

Al ser una estructura jerárquica los menús superiores nidifican, a su vez, menús inferiores. Siguiendo la sintaxis JavaScript se definen "parent" los menús que anidan otros menús y "child" los menús anidados.

Es obvio, visto cuanto hemos dicho, que el menú intermedio entre el más alto y el más bajo de la jerarquía está anidado en el superior y anida a su vez, simultáneamente, al inferior.

El archivo "menu.htm" contiene dentro de la marca <HEAD> una parte, si bien mínima, de sintaxis JavaScript.

La primera parte de sintaxis contenida entre <SCRIPT></SCRIPT> determina el tipo y la versión de los navegadores que pueden acceder al documento. Como hemos señalado antes, este ejemplo puede verse sólo con las versiones de cuarta generación de Netscape e Internet Explorer.

La segunda parte de sintaxis JavaScript contiene algunos parámetros variables que permiten modificar, mediante la manipulación de valores, el aspecto y la estructura del menú.

En particular, los parámetros modificables son:

MenuWidth=140

Anchura en píxel del menú

ChildOverlap=3

Distancia horizontal en píxel entre los varios niveles de menú (entrante hacia la izquierda; para un entrante hacia la derecha hay que añadir el signo "-" al valor numérico)

ChildOffset=2

Distancia vertical en píxel entre los varios niveles de menú (hacia abajo; para un entrante hacia arriba, hay que añadir el signo "-" al valor numérico)

SecondsVisible=0.5

Tiempo de visibilidad, en segundos, del menú una vez que el ratón sale del área

FntCol="black"

Color del texto (también en valores hexadecimales)

OverFnt="white";

Color del texto seleccionado (cambio dinámico sólo para MSIE)

FntSiz="12px"

Tamaño del texto

FntWgh="normal"

Espesor del carácter (alternativas: extra-light, demi-light, light, medeum, extra-bold, demi-bold, bold)

FntSty="normal"

Estilo del texto (italic)

FntFam="verdana"

El nombre del tipo True Type Font que se utiliza

BackCol="#C0C0C0"

Color de fondo del menú no seleccionado (en valores hexadecimales)

OverCol="#9F9FFF"

Color de fondo del menú seleccionado (en valores hexadecimales)

LenHgt="normal"

Altura de las líneas del menú (que se sustituirán con números >1)

BorWid=2

Espesor, en pixel, de los bordes del menú

BorCol="#999A9B"

Color del borde de los menú (en valores hexadecimales)

ImgSrc="imagen.gif"

Nombre de la imagen que hay que visualizar para la la indicización de los submenús

ImgSiz=5

Tamaño, en pixel, de la imagen (5x5)



  Vuelve a principio de página