JavaScript: menús desplegables

Los menús desplegables

El script

Como funciona

//Mas en: http://javascript.espaciolatino.com/
//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
     obj.style.backgroundColor= itemOrig;
}
-->
< /script>

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.

La página

Como se usa

<BODY>
< !-- 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)">Cabecera del menú
< /div>

<div id="itMenu1" style="width:103px; height:75px; z-index:1; left: 39px; top: 44px" class="itMenu"
onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)">
< div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
< a href="destino1.htm" >Item 1</a>
< /div>
< div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
< a href="destino1.htm" >Item 2</a>
< /div>
< div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
< a href="destino1.htm" >Item 3</a>
< /div>
< /div>
Resto de la página web
< /BODY>
< /HTML>

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

cabMenu es la apariencia de la cabecera del menú, su título

itMenuAct apariencia de la opción con el ratón encima

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.

Para la cabecera vinculamos los eventos onMouseOver y onMouseOut para despelgar o recoger el menú al pasar el ratón por encima.

La capa que contienen las opciones contienen también los eventos onMouseOver y onMouseout para desplegar o recoger el menú al pasar el ratón por encima.

Cada capa de opción necesita también eventos onMouseOver y onMouseout si queremos que se destaquen al señalarlas con el ratón. Estas capas contienen enlaces o hipervínculos que apuntan a las direcciones a las que debe ir el navegador al pulsar sobre ellas.