HTMLpointHTMLpoint HTMLpoint.com


 Menú expansible sin refresh 1/2

  semana 54 - 14 febrero 2000

Organizar enlaces de manera clara y sintética es una de las exigencias principales de cualquier diseñador web. A menudo, sin embargo, esta exigencia choca con problemas objetivos de organización, cuando el número de enlaces que hay que insertar en el menú es muy elevado. En estos casos, las soluciones son dos: o se crean macroáreas que recojan otras subsecciones, o bien puede utilizarse el código script de esta semana.

En el Javascript de esta semana presentamos un menú que tiene características similares a los de los sistemas Windows, que también gráficamente invocamos valiéndonos de algunos iconos típicos de estos sistemas. El ejemplo es completamente crossbrowser, es decir, es compatible tanto con MsIe como con Netscape 4. Existen ejemplos con efectos similares y con código mucho más sencillo, pero son compatibles sólo con el navegador de Redmond y excluyen Netscape. Gracias a este ejemplo, será posible implementar un menú dinámico expansible en el propio sitio web, sin el temor de excluir a ningún usuario de uno u otro navegador.

El ejemplo consta de 4 file:
  • esempio.htm [el documento HTML dentro del cual queremos insertar el menú]
  • link.gif [el icono que Windows asigna a los file HTML si el navegador predefinido es Internet Explorer]
  • 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 la carpeta está abierta y deja ver su contenido]
Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

esempio.htm

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 incorparada:

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

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

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

ClSub se refiere a los submenús, es decir, a las voces de menú visualizadas cuando las principales se pulsan y expanden. También en este caso, la colocación es absoluta y la anchura idéntica a la vista previametne. El valor Left determina la distancia del margen izquierdo respecto a la voz principal, mientras que Top determina la distancia vertical de la voz principal. En otras palabras, interviniendo en estos dos valores es posible disponer 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, por tanto, distan 300 píxel del margen izquierdo, cero del superior y tienen una dimensión horizontal de 250 píxel y vertical de 400. Para mover a otra 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 lo que queremos, es tener voces de menú o submenú diferentes de las impostadas en el ejemplo, tendremos que modificar estos valores.

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

Las líneas de código que siguen inmediatamente la apertura de la marca <SCRIPT> son muy importantes para la personalización del menú.

var stayFolded=true

Este valor fijado en "true" imposta la opción por la que las carpetas, cuando están expandidas, no cierran automáticametne las otras aún abiertas. El valor fijado en "false", por el contrario, imposta la opción de manera que puede haber únicamente una voz de menú expandida, mientras que las otras, si están abiertas, se cierran automáticamente.
La segunda opción es útil en menús muy amplios, que si estuvieran completamente expandidos crearían problemas al diseño de página. La primera opción se acerca 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 se visualiza 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, no tienes más que superponerlas a las existentes.

El código sucesivo controla el acceso a algunas versiones del navegador, que, como dijimos al inicio, está limitado a Internet Explorer 4 o superior ys 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