HTMLpointHTMLpoint HTMLpoint.com


 Menú arbóreo expansible 2/2  

 por Massimiliano Valente

El ejemplo examinado en este artículo tiene tres voces principales de menú, cada una de las cuales se articula en diferentes voces de submenú. El número de voces principales no es independiente del script, en el sentido de que no es posible añadir otras voces sin impostar la función correspondiente. Estamos hablando de la función Init(), que en nuestro ejemplo contiene el siguiente código:


Muestra el ejemplo práctico


El primer array imposta las tres voces principales del menú, asignándoles valores según números progresivos. El segundo array se refiere a las voces de los submenús visualizadas cuando los mismos están expandidos. Para agregar nuevas voces de menú es necesario impostar una nueva línea de código para ambos array, siguiendo la numeración progresiva de la voz de menú inmediatamente anterior. En nuestro ejemplo, si quisiéramos añadir un cuarto título al menú, el código debería modificarse como sigue:

Muestra el ejemplo práctico


Una vez impostado como expuesto el script, es necesario operar dentro del documento insertando las correspondientes voces de menú y enlaces a recursos.

Para no hacer demasiado pesado el artículo llenándolo con decenas y decenas de líneas de código, recogemos sólo la primera voz del menú y las relativas voces del submenú:

Muestra el ejemplo práctico


Este código imposta el icono y la primera voz de menu. "divTop1", "menu(0)", "imgA0" hacen referencia a las funciones escritas previamente y prevén, para las voces de menú sucesivas, una numeración progresiva. El enlace está constituido por una celda porque de este modo es posible inhabilitarlo manteniendo las características de los hiperenlaces. En otro caso, haciendo clic en el título principal, nos habría llevado a otra página.

El título del menú es un simple documento de texto cuyo estilo ha sido impostado en la CSS inicial.

Este código se refiere a las subcategorías y es idéntico para todas las voces del menú. Cada enlace invoca la clase "clSubb". Cada uno de ellos está acompañado por una imagen cuya distancia horizontal está establecida por el valor de HSPACE, mientras que la disposición respecto al texto estpa definida por VALIGN=middle.


  Vuelve a principio de página