HTMLpointHTMLpoint HTMLpoint.com


 Menú que se esconde con DHTML 3/4

 por Massimiliano Valente

dhtml01.htm


Antes de nada es necesario insertar la línea de código que invoca el archivo externo "script.js". Esto se hace introduciendo entre las marcas <HEAD> del documento el siguiente código:

<script src="script.js">
</script>

Una vez hecho esto, impostamos las hojas de estilo relativas a la formatación del texto visualizado dentro del menú:

Muestra el ejemplo práctico


Se trata de una clásica hoja de estilo incorporada que determina la formatación para todos los elementos correspondientes de la página.

Se presta especial atención a la colocación y a las dimensiones de "DIV". Estos valores expresan , respectivamente:

Position:absolute –indica que todos los valores que siguen hacen referencia al margen superior izquierdo del documento, sea cual sea la posición en la que se encuentren;

Top:0 – la distancia en píxel desde el margen superior del documento;

Left:30 – la distancia en píxel desde el margen izquierdo de la página;

Width:150 – la anchura en píxel del espacio dejado al menú;

Una vez impostados los estilos de página, la última operación que debe realizarse consiste en insertar el siguiente código:


Muestra el ejemplo práctico


Se trata en parte de simples enlaces y en parte de referencias a los script previamente impostados.

Se debe prestar mucha atención a la línea:

<a href="javascript://" onclick="moveMenu()">MENU</a>

Se trata de la voz de menú siempre visible que tiene la importante función de mostrar o esconder las restantes voces.

El gestor de eventos onclick prevé que se invoque la función "moveMenu" cuando el visitante hace clic en la voz "menú". Dicho de otro modo, para que el menú se muestre o se esconda es necesario pulsar en la voz como si se tratara de un enlace.

Onclik puede sustituirse con otros gestores de eventos tales como onmouseover y onmouseout de la manera y con los efectos que siguen:

<a href="javascript://" onmouseover="moveMenu()">Menú</a>

Onmouseover se utiliza con la marca <A> y se activa cuando el cursor del ratón pasa por encima del texto "anclado" a un enlace. Muy a menudo se utiliza conjuntamente con la función para hacer que aparezcan mensajes en la barra de estado del navegador. En nuestro ejemplo, pues, para que el menú se muestre o se esconda es suficiente que el cursor del ratón para por al palabra "menú".

<a href="javascript://" onmouseout="moveMenu()">Menú</a>

El gestor de eventos onmouseout queda activado cuando el cursor del ratón abandona el área de enlace. Tiene un funcionamiento opuesto al de onmouseover, ya que lo importante no es que el ratón entre en la zona de enlace, sino que salga de ella. Sólo en ese momento se activará el gestor de eventos.


  Vuelve a principio de página