HTMLpointHTMLpoint HTMLpoint.com


 Menú desde botón dcho.  

 por Massimiliano Valente

Esta demo concentra en sí las características de la simplicidad y la utilidad: pulsando el botón derecho del ratón en cualquier punto del documento se activa un menú idéntico en todo al establecido por defecto por el navegador, pero completamente personalizable sea por lo que se refiere a los aspectos cromáticos que a los enlaces.

En términos prácticos todo esto se traduce en unas cuantas líneas de código, claras y concisas. El único límite de esta demo es que es compatible exclusivamente con Microsoft Internet Explorer 5. Los usuarios de las precedentes versiones de MsIe y de todas las versiones de Netscape actualmente en el mercado no visualizan el efecto dinámico, pero tampoco molestos errores en los script.

Lo primero que tenemos que hacer es impostar las hojas de estilo necesarias para definir los aspectos gráficos y de diseño del menú:


width:140px;

indica la medida horizontal en píxel de la ventana de menú.

border:2px solid black;

indica el espesor en píxel del borde de la ventana de menú

background-color:Silver;

determina el color de fondo del menú. Generalmente, los menús van en color gris claro (silver), como en este caso.

font-family:Verdana;

el tipo de carácter utilizado. En este caso, como en todos los casos en que el documento es visualizado por diversos ordenadores, es aconsejable utilizar una fuente normalmente soportada por los sistemas Windows y Mac.

line-height:20px;

distancia vertical, expresada en pixel, entre las varias voces del menú.

cursor:default;

el tipo de cursor visualizado cuando el ratón pasa por encima de las distintas voces del menu. Impostando "default", el navegador invoca la clásica flecha dirigida hacia arriba a la izquierda. Otras posibles alternativas son: crosshair, auto, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help.

visibility:hidden;

la propiedad visibility imposta la visibilidad de un elemento según el elemento progenitor. Si, como en este caso, la propiedad se imposta en "hidden", el elemento ignora cualquier valor heredado y permanece escondido hasta que la impostación del código sucesivo no invoca su uso. En otras palabras, la propiedad visibilility hace que los elementos se vuelvan transparentes con el flujo del texto del documento. La impostación hidden no elimina los contenidos del flujo del documento, sino que hace tan sólo que se vuelvan transparentes. De este modo, podrán invocarse en cualquier momento.

padding-left:15px;


padding-right:15px;




Estos atributos definen el espacio de relleno en píxel entre los lados del menú y los elementos que contiene dentro.

Una vez impostados los estilos del menú, proseguimos ocupándonos ahora de las funciones showmenuie5, hidemenuie5, highlightie5 y lowlightie5.

Las dos primeras funciones muestran y esconden el menú con el flujo del documento. Como adelantamos antes, esta demo es compatible exclusivamente con Msie5 y, por esta razón, no hay referencias a layer ni código crossbrowser.

clientX y clientY hacen referencia a las coordenadas del cursor del ratón respecto al área client de la ventana. En particular, showmenuie5 muestra el menú, mientras que hidemenuie5 lo esconde ante el flujo de datos.

El color del texto y del fondo de las voces activas de menú queda definido por el siguiente código:

donde backgroundColor="blue" es el color de fondo de las voces activadas por el ratón y .color="yellow" es el color del texto.

El color de los enlaces que se han tocado pero que ya no están activos queda definido por el código:

donde color="black" es el color de texto impostado.

La última función:

function jumptoie5(){
if (event.srcElement.className=="menuitems")
window.location=event.srcElement.url


permite al navegador llegar a la dirección URL deseada haciendo clic con el ratón en las voces del menú.

Las voces de menú se insertan dentro de la marca DIV:

<div id="ie5menú" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">

Dove:

  1. el gestor de eventos onMouseover invoca la función "highlightie5()" cuando pasa el ratón por encima de las voces del menú
  2. el gestor de eventos onMouseout invoca la función "lowlightie5()" cuando el ratón abandona el área de enlace
  3. el gestor de eventos onClick invoca la función "jumptoie5()" para llegar a la dirección URL correspondiente al clic del ratón.
Cada voz del menú, dentro del cuerpo del documento, queda definida por el código:

Muestra el ejemplo práctico


Para añadir voces de menú nuevas, no se requiere sino el copia/pega de las líneas de código ya presente.

Por último, hay que insertar dentro del documento el siguiente código, sin el cual la demo no produce sus efectos:

En último análisis, la demo presentada en este artículo pone en evidencia, además de la utilidad de este recurso técnico, los progresos realizados por MsIe 5 en la gestión de los eventos dinámicos y la relativa facilidad con la que DHTML puede insertarse en los hipertextos.


  Vuelve a principio de página