HTMLpointHTMLpoint HTMLpoint.com


 Menú arbóreo expansible 1/2

 por Massimiliano Valente

Una presentación de datos ordenada e intuitiva es un punto a favor para lograr un buen sitio web. Dicho objetivo se obtiene implementando buscadores internos y creando menús sintéticos y al mismo tiempo exhaustivos, que sigan al visitante a cada punto del sitio. Los menús permiten al navegador "saltar" de una página a otra del sitio con un simple clic, sin perder tiempo con aburridas búsquedas o recorridos por la historia del navegador. Sitios de grandes dimensiones, con numerosas secciones y voces de menú, tienen el problema de indicizar en un solo elenco decenas de enlaces. El riesgo, desde este punto de vista, es crear menús demasiado largos, los cuales además de ocupar toda la página, resultan de difícil lectura y consulta. Una solución a este problema son los menú expansibles. Entendemos por "expansible" los elencos con algunas voces principles que, al incio, están cerradas y se expanden el visitante las pulsa. El ejemplo más conocido de este tipo de menú es el adoptado por los sistemas Windows. Es suficiente abrir la aplicación "explora recursos" de Win95-98 para darse cuenta de lo útil e indispensable que son los menús expansibles.

HTML clásico no permite usar dichos menús por los consabidos problemas relacionados con su carácter estático. Es posible conseguir un efecto similar con Javascript, pero sólo a través de un grandísimo uso de cookie y refresh automático de página. Dicho de otro modo, los eventos no se verifican con la página completamente descargada, sino con cada refresh de la misma, con la consecuente mayor lentitud de ejecución.

HTML dinámico es la solución más completa de los problemas hasta ahora expuestos, gracias a sus características que permiten modificar los documentos HTML incluso tras haberlos descargado por completo.

En la demo de este mes presentamos un menú que tiene características similares a las de los sistemas Windows, a los que hacemos también referencia desde un punto de vista gráfico valiéndonos de algunos iconos típicos de estos sistemas. La demo es completamente crossbrowser, es decir, es compatible tanto con MsIe como con Netscape 4. Existen ejemplos similares en los efectos y mucho más simples en el código, pero excluyen Netscape y son compatibles sólo con el navegador de Redmond. Gracias a este ejemplo será posible implementar un menú dinámico expansible en nuestro sitio sin temor de excluir de la navegación a los usuarios de uno u otro navegador.

Anteriormente hemos hecho referencia a los tres iconos usados en este ejemplo:

chiusa.gif : el icono que muestra una carpeta que contiene otros enlaces y conexiones aún no expandida;

aperta.gif : es el clásico icono que aparece cuando una carpeta está abierta y muestra su contenido;

link.gif : el icono que Windows asigna a los file HTML si el navegador predefinido es Internet Explorer.

Antes de pasar a escribir el código necesario para el funcionamiento de la demo, es necesario impostar el estilo y la colocación absoluta del menú mediante una hoja de estilo incorporada:

DIV.clTop{position:absolute; width:250px}

Esta línea establece la dimensión horizontal (width) en píxel del área de menú.

DIV.clSub{position:absolute; left:15px; top:25px; width:250px}

ClSub se refiere a los submenú, es decir a las voces de menú visualizadas cuando se hace clic en las principales y éstas se expanden. También en este caso la colocación es absoluta y la anchura es asimismo idéntica a la vista anteriormente. El valor Left determina la distancia del margen izquierdo respecto a las voces principales, mientras que Top define la distancia vertical de la voz principal. En otras palabras, con estos dos valores es posible situar las voces del submenú respecto a los títulos de cada una de las voces.

#divCont{position:relative; left:300px; top:0px; height:400px; width:250px;}

Esta línea define la colocación en la página de todos los elementos del menú, que distan, por tanto, 300 píxel del margen izquierdo, cero del superior y tienen una dimensión horizontal de 250 píxel y vertical de 400. Para cambiar de posición el menú es necesario modificar estos valores.

A.clMain{font-family:Arial; font-size:17px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial; font-size:16px; text-decoration:none; color:black}


Estas dos líneas de código establecen, respectivamente, el estilo del texto de las voces principales de menú (clMain) y de las voces del submenú (clSubb). Si necesitamos tener voces de menú o submenú diversas de las impostadas en el ejemplo, deberemos modificar estos valores.

Una vez terminada la impostación de los estilos de página, pasamos al análisis del código Javascript gracias al cual obtendremos el efecto dinámico, punto central de este ejemplo.

Las líneas de código que inmediatamente sucesivas a la apertura de la marca <SCRIPT> tienen gran importancia por lo que se refiere a la personalización del menú.

var stayFolded=true

Este valor fijado en "true" imposta la opción por la cual las carpetas, cuando están expandidas, no cierran automáticamente las demás que permanecen abiertas. El valor fijado en "false", por el contrario, imposta la opción mediante la cual tan sólo una voz de menú puede estar expandida, por lo que las restantes, si estuvieran abiertas, se cierran automáticamente. La segunda opción es útil para menús muy amplios, los cuales, en caso de estar completamente expandidos, crearían problemas al diseño de página. La primera opción se parece a lo que sucede en los sistemas Windows.

var exImg=new Image(); exImg.src='aperta.gif'
var unImg=new Image(); unImg.src='chiusa.gif'


Estas dos líneas de código impostan las imágenes que acompañan este ejemplo. Ambas están colocadas a la izquierda de las voces principales del menú. La segunda imagen aparece cuando la voz de menú no está expandida y es sustituida dinámicamente por la primera cuando se hace clic en la misma o en el título de la voz de menú.

Para sustituir con otras imágenes las dos impostadas en esta demo, basta con sobrescribir las existentes.

El código sucesivo controla el acceso a algunas versiones del navegador que, como hemos dicho al inicio, está limitado a Internet Explorer 4 o superior y Netscape 4:

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)



  Vuelve a principio de página