Menú desplegable (obsequio de Wolverine para mis amigos del foro)
Wolverine
17 de Febrero del 2004
<html><head>
<style>.itMenu{position: absolute; clip: rect( ); background:lightgrey; visibility: hidden}
.cabMenu{position: absolute; clip: rect( ); color:white; background:rgb(0,108,108)}
a{color:black;font-family:verdana;text-decoration:underline}
a:hover{color:black;font-family:verdana;font-weight:bold;text-decoration:underline}</style>
<script language="JavaScript">
var mie =(navigator.appName.indexOf("Microsoft")>=0)
var itemOrig;
function despMenu(nombre,sn)
{
obj = document.all[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="cyan";
}
else
obj.style.backgroundColor= itemOrig;
}
</script>
</script>
</HEAD>
<body bgcolor="rgb(240,208,48)">
<font size="2" face="verdana">
<div id="Menu1" onMouseOver="despMenu('itMenu1',1)" onMouseout="despMenu('itMenu1',0)" style="width:115;height:20;z-index:2; left: 0px; top: 0px" class="cabMenu"><center><b>Desplegable</b>
</center></div><div id="itMenu1" style="width:115;height:25;z-index:1;
left:0px;top:20" 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)">
<center><a target="Frame3" href="Dirección 1" >Dirección 1</a></div>
<div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 2">Dirección 2</a>
</div>
<div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 3">Dirección 3</a>
</div>
</div>
</body>
</html>
Bueno, el código lo diseñé estudiando una página, y ahora lo puedo explicar a cualquiera que me escriba al correo. Y bueno, si alguien quiere una función para fabricar sub-menús, nada más que me diga y yo le doy una mano o le mando alguna demostración.
Bueno, ya saben. Los sub-menús son aquellos que escogiendo una opción te dan distintas posibilidades.
Ojalá lo utilicen bien en la decoración de sus páginas web.
<style>.itMenu{position: absolute; clip: rect( ); background:lightgrey; visibility: hidden}
.cabMenu{position: absolute; clip: rect( ); color:white; background:rgb(0,108,108)}
a{color:black;font-family:verdana;text-decoration:underline}
a:hover{color:black;font-family:verdana;font-weight:bold;text-decoration:underline}</style>
<script language="JavaScript">
var mie =(navigator.appName.indexOf("Microsoft")>=0)
var itemOrig;
function despMenu(nombre,sn)
{
obj = document.all[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="cyan";
}
else
obj.style.backgroundColor= itemOrig;
}
</script>
</script>
</HEAD>
<body bgcolor="rgb(240,208,48)">
<font size="2" face="verdana">
<div id="Menu1" onMouseOver="despMenu('itMenu1',1)" onMouseout="despMenu('itMenu1',0)" style="width:115;height:20;z-index:2; left: 0px; top: 0px" class="cabMenu"><center><b>Desplegable</b>
</center></div><div id="itMenu1" style="width:115;height:25;z-index:1;
left:0px;top:20" 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)">
<center><a target="Frame3" href="Dirección 1" >Dirección 1</a></div>
<div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 2">Dirección 2</a>
</div>
<div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 3">Dirección 3</a>
</div>
</div>
</body>
</html>
Bueno, el código lo diseñé estudiando una página, y ahora lo puedo explicar a cualquiera que me escriba al correo. Y bueno, si alguien quiere una función para fabricar sub-menús, nada más que me diga y yo le doy una mano o le mando alguna demostración.
Bueno, ya saben. Los sub-menús son aquellos que escogiendo una opción te dan distintas posibilidades.
Ojalá lo utilicen bien en la decoración de sus páginas web.
JMC
17 de Febrero del 2004
Hola, muchas gracias por compartir tus "trucos" o "ideas" para mejorar el diseño de nuestras páginas, ¿me podrías indicar la dirección de tu página web para ver como quedan este tipo de menús así como los submenús?
Gracias.
Gracias.
Wolverine
17 de Febrero del 2004
Bueno JMC, primero que todo, de nada por el código. Y aún no he lanzado mi página Web, pero la tengo grabada en CD-ROM y pronto tendrás la posibilidad de ver el funcionamiento de los menús desplegables. Por lo pronto, puedes copiar el código y pegarlo. Luego guardarlo con formato *.html o *.htm, lo abres con tu explorador de Internet, y listo.
También puedes modificarlo a tu gusto y darle distintas funciones.
Como siempre digo. "El código fuente es libre".
Sólo así es posible aprender de nuestro ordenador y de nosotros mismos.
También puedes modificarlo a tu gusto y darle distintas funciones.
Como siempre digo. "El código fuente es libre".
Sólo así es posible aprender de nuestro ordenador y de nosotros mismos.
ALICIA
17 de Febrero del 2004
MUCHISIMAS GRACIAS!!!
HABIA ESTADO BUSCANDO LA MANERA DE HACER UN MENU DESPEGABLE HACE DOS SEMANAS
, Y NO ENCONTRABA MAS QUE VENTAS POR AQUI Y POR ALLA...
MUUCHAS GRACIAS Y CLARO QUE ME GUSTARIA APRENDER
MAS Y APRENDER DE TI...
HABIA ESTADO BUSCANDO LA MANERA DE HACER UN MENU DESPEGABLE HACE DOS SEMANAS
, Y NO ENCONTRABA MAS QUE VENTAS POR AQUI Y POR ALLA...
MUUCHAS GRACIAS Y CLARO QUE ME GUSTARIA APRENDER
MAS Y APRENDER DE TI...