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 básico, sin animación
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
Este script te puede servir para un pequeño menú o como base para desarrollar algo más sofisticado, con animación al mostrar el menú por ejemplo
Es un ejemplo para practicar, usa visibility para mostrar u ocultar el menú. Igualmente podrías usar display block o none. Tne en cuenta que visibility mantiene el espacio ocupado por el menú.
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.