Menu Java

MENU DESPLEGABLE EN JAVASCRIPT EL SCRIPT //Primero comprobamos el navegador var itemOrig; function despMenu(nombre,sn) { obj = document.getElementById[nombre]; if (sn>0) obj.style.visibility = "visible"; else obj.style.visibility = "hidden"; } function destacar(obj, val) { if (val==1) { itemOrig = obj.style.backgroundColor; obj.style.backgroundColor="Aqua"; } else

COMO SE USA La gran mayoría de los típicos menús desplegables están basados en el atributo style.visibility de las capas (elementos DIV de las páginas web). Este script te puede servir para un pequeño menú o como base para desarrollar algo más sofisticado. Un menú básicamente es una lista de opciones, esta lista la colocamos en una capa DIV. La primera función, despMenu(), sirve para mostrar u ocultar esta capa, el primer argumento es el ID de la capa y el segundo es 0 para ocultarla y 1 para mostrarla. La segunda función, destacar(),se usa para resaltar modificar el color de fondo de la opción del menú cuando pase el ratón, el primer argumento es el ID de la capa que contiene al elemento del menú y el segundo se interpreta como sigue: 0: indica que se debe resaltar, el ratón está encima. 1: se vuelve a la normalidad. El color original se guarda en la variable global itemOrig.

obj.style.backgroundColor= itemOrig; } --> < /script> LA PAGINA < !-- Definimos estilos para el menu --> < style type="text/css"> < !-.itMenu { position: absolute; clip: rect( ); background: #99FF99; visibility: hidden} .cabMenu { position: absolute; clip:

COMO FUNCIONA La aplicación a tu página de este script tiene dos partes, una la solucionamos en la sección HEAD definiendo el estilo para el menu. Necesitas tres estilos: itMenu La capa que contiene al menu. No olvides la propiedad position en absolute

rect( ); color: #FFFF66; background: #0033FF} .itMenuAct { background: #CCFFFF; width: 160px } .itMenuDes { background: #99FF99; width:

cabMenu es la apariencia de la cabecera del menú, su título itMenuAct apariencia de la opción con el ratón encima

160px }

itMenuDes apariencia de la opción sin el ratón encima

-->

En el cuerpo situas una capa que contendrá el título del menú. Luego necesitas otra capa para contener las opciones del menu, que son elementos DIV.

< /style> < SCRIPT language="JavaScript"> < !---Aquí sitúas el código javascript ---> < /script> < /HEAD> < !-- La etiqueta DIV que sigue define la capa con la cabecera del menú. Cuando el ratón pase por aquí se despliega el menú--> < div id="Menu1" style="width:140px; height:21px; z-index:2;

left: 39px; top: 23px" class="cabMenu" onMouseOver="despMenu('itMenu1',1)" onMouseout="despMenu('itMenu1',0)">Cabe cera del menú < /div>