Los menús desplegables

Este ejemplo muestra lo que podría ser la base de un sistema de menus. Se trata de un menú deslegable muy esquemático.

Al pasar el ratón por la cabecera del menú se despliegan los items que lo forman.

Solución

<script>
var itemOrig;
function despMenu(nombre,sn)
{
obj = document.getElementById(nombre);
if (sn)
     obj.style.visibility = "visible";
else
     obj.style.visibility = "hidden";
}
function destacar(obj, val)
{
if (val)
     {
     itemOrig = obj.style.backgroundColor;
     obj.style.backgroundColor="Aqua";
     }
else
     obj.style.backgroundColor= itemOrig;
}
</script>

<style>

.contMenu1{width:fit-content; visibility: hidden}

.cabMenu { color: #FFFF66; background: #0033FF; width: 160px}

.itMenuDes { background: #99FF99; width: 160px; padding: 10px }

</style>

<body>

<!-- La etiqueta DIV que sigue define la capa que contendrá el
menú, la que se despliega cuando el ratón pase por la cabecera-->

<div>

<div id="Menu1" class="cabMenu" onMouseout="despMenu('itMenu1',false)" onMouseover="despMenu('itMenu1',true)">

Cabecera del menú

</div>

<div id = "itMenu1" class="contMenu1" onMouseover="despMenu('itMenu1',true)" onMouseout="despMenu('itMenu1',false)">

    <div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,true)" onMouseout="destacar(this,false)">

    <a href="destino1.htm" >Item 1</a>     </div>

    <div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,true)" onMouseout="destacar(this,false)">

    <a href="destino1.htm" >Item 2</a>

    </div>     <div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,false)">

    <a href="destino1.htm" >Item 3</a>

    </div>

  </div>

</div>

Resto de la página web

</body>

Explicación

La gran mayoría de los típicos menús desplegables están basados en el atributo style.visibility de los bloques.

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 un bloque div.

La primera función, despMenu(), sirve para mostrar u ocultar el bloque que se le pasa como primer argumento, (como su atributo id). El segundo argumento indica si de muestra (true) o se oculta (false).

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:
false : indica que se debe resaltar, el ratón está encima.
true: se vuelve a la normalidad. El color original se guarda en la variable global itemOrig.

Como lo uso

 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:
.contMenu1: La capa que contiene al menu.
.cabMenu es la apariencia de la cabecera del menú, su título
.itMenuDes apariencia de la opción sin el ratón encima

En el cuerpo situas un bloque para la cabecera del menú, la que contiene el título que no se va a ocultar.

Esta cabecera se vincula con los eventos mouseover y mouseout para desplegar o recoger el menú al pasar el ratón por encima.

El bloque conenedor de todos los items también se vincula con los mismos eventos que la cabecera. Al sallir de la cabecera se cerraría el menu, por eso al entrar en esta capa se mantiene el menu desplegado. Al salir de este contenedor se debe cerrar el menu

Los bloques que contienen las opciones vinculan también estos eventos para destacar el item donde esté 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.