Menú desplegable (obsequio de Wolverine a mis amigos del foro)
<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.
hola me gustaria q me obsequieras el menu con submenus te lo agradeceria mucho
Disculpa si no vi tu consulta Francisco.
La verdad es que Netscape no se comporta como debiera frente a las capas, ya que este menú está fuertemente ligado a las capas y a la etiqueta <DIV>. Pues voy a ver qué problema hay para corregir lo que me han preguntado varios.
Cuídate mucho
Atte Wolverine
La verdad es que Netscape no se comporta como debiera frente a las capas, ya que este menú está fuertemente ligado a las capas y a la etiqueta <DIV>. Pues voy a ver qué problema hay para corregir lo que me han preguntado varios.
Cuídate mucho
Atte Wolverine
hola amigo, como puedo hacer que me aparescan mas menus desplegables y que aparezca mas al centro y un poco mas abajo.
Me han pasado este script para hacer un menu desplegable y me gusta mucho pero el problema es que mi pagina tiene frames y los enlaces que tengo se abren el el frame donde está el menu y yo quiero que se abra en un nueva.
<style type="text/css">
<!--
a.bi{
background-color:darkcyan;
color:#ffffff;
display:block;
font-family: MS Sans Serif,sans-serif;
font-size:8pt;
font-weight:bold;
padding:3px 3px 3px 3px;
text-decoration:none;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
}
a.bi:hover{
background-color:#f8f8f8;
color:darkred;
}
a.mi{
background-color:darkred;
color:#ffffff;
display:block;
font-family:MS Sans Serif,sans-serif;
font-size:8pt;
font-weight:bold;
padding: 2px 2px 2px 4px;
text-decoration:none;
}
a.mi:hover{
background-color:#f8f8f8;
color:darkred;
}
.mn{
background-color:darkred;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
z-index:100;
}
.sp{
BORDER-TOP:#000000 1px solid;
MARGIN:2px;
BORDER-BOTTOM:#225555 1px solid
}
//-->
</style>
<!--paste above inbetween your head tags-->
<!--Past below inbetween your body tags-->
<script language="JavaScript">
<!--//
var D6=window,Y7=document;
function
B8(){this.ver=navigator.appVersion;this.agent=navigator.userAgent;this.dom=Y7.getElementById?1:0;th
is.opera5=this.agent.indexOf("Opera 5")>-1;this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom &&
!this.opera5)?1:0;this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom &&
!this.opera5)?1:0;this.ie4=(Y7.all && !this.dom &&
!this.opera5)?1:0;this.ie=this.ie4||this.ie5||this.ie6;this.mac=this.agent.indexOf("Mac")>-1;this.n
s6=(this.dom && parseInt(this.ver)>=5)?1:0;this.ns4=(Y7.layers &&
!this.dom)?1:0;this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5);return
this}bw=new B8();z=0;b=0;g="";if(bw.opera5||bw.ns6){b=2};if(bw.ie){g=" style='width:
100%'"}else{z=6}mt=70;ml=10;w=129;mh=23;mw=ml-w;k=0;mt=mt-z;p="<a class='mi'"+g+" href='";q="'
title='";r=""; return true' onmouseout='window.status=""; return true'>";t="</a>";a="'
onmouseover='window.status="";v="<div class=sp></div>";
m=new Array();n=new Array();s=new Array();sw=new Array();su=new Array();st=new Array()
m[0]='Mi familia';n[0]='#';sw[0]=120;su[0]='Mi familia';st[0]="";s[0]=""
+p+"page1.html"+q+a+"familia"+r+"familia"+t
+p+"page2.html"+q+a+"mi novio"+r+"mi novio"+t
m[1]='fotos';n[1]='#';sw[1]=140;su[1]='fotos';st[1]="";s[1]=""
+p+"http://www.pozoseco.com"+q+a+"pueblo"+r+"pueblo"+t
+p+"page3.html"+q+a+""+r+""+t
m[2]='';n[2]='#';sw[2]=130;su[2]='';st[2]="";s[2]=""
+p+"page.html"+q+a+""+r+""+t
+p+"page.html"+q+a+""+r+""+t
+p+"page.html"+q+a+""+r+""+t
+p+"page.html"+q+a+""+r+""+t
m[3]='';n[3]='#';sw[3]=130;su[3]='';st[3]="";s[3]=""
+p+"page.html"+q+a+""+r+""+t
ma=m.length
if (k==1) {mw2=ml-w;
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute;
top:"+(mt+mh)+";left:"+(mw+=w+2)+";width:"+(sw[i]-b)+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute;
top:"+mt+";left:"+(mw2+=w+2)+";width:"+w+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
else {mw2=mt-mh;mt2=mt-mh+2
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute;
top:"+(mt2+=(mh+1))+";left:"+(ml+w-10)+";width:"+sw[i]+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute;
top:"+(mw2+=(mh+1))+";left:"+ml+";width:"+w+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
function lib_obj(obj,nest){nest=(!nest) ? "":'document.'+nest+'.';this.evnt=bw.dom?
document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers."
+obj):0;this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;this.ref=bw.dom||bw.ie4?document:this.css
.document;this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;this.y=parseI
nt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0;return this}
function lib_doc_size(){this.x=0;this.x2=bw.ie &&
document.body.offsetWidth-20||innerWidth||0;this.y=0;this.y2=bw.ie &&
document.body.offsetHeight-5||innerHeight||0;this.x50=this.x2/2;this.y50=this.y2/2;return this;}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
function libinit(){page=new lib_doc_size();o=new Array();for (i=0; i < ma; i++){o[i]=new
lib_obj('sb'+i);o[i].hideIt()}}
libinit();
//-->
espero que podais ayudarme.Gracias
</script>
<style type="text/css">
<!--
a.bi{
background-color:darkcyan;
color:#ffffff;
display:block;
font-family: MS Sans Serif,sans-serif;
font-size:8pt;
font-weight:bold;
padding:3px 3px 3px 3px;
text-decoration:none;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
}
a.bi:hover{
background-color:#f8f8f8;
color:darkred;
}
a.mi{
background-color:darkred;
color:#ffffff;
display:block;
font-family:MS Sans Serif,sans-serif;
font-size:8pt;
font-weight:bold;
padding: 2px 2px 2px 4px;
text-decoration:none;
}
a.mi:hover{
background-color:#f8f8f8;
color:darkred;
}
.mn{
background-color:darkred;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
z-index:100;
}
.sp{
BORDER-TOP:#000000 1px solid;
MARGIN:2px;
BORDER-BOTTOM:#225555 1px solid
}
//-->
</style>
<!--paste above inbetween your head tags-->
<!--Past below inbetween your body tags-->
<script language="JavaScript">
<!--//
var D6=window,Y7=document;
function
B8(){this.ver=navigator.appVersion;this.agent=navigator.userAgent;this.dom=Y7.getElementById?1:0;th
is.opera5=this.agent.indexOf("Opera 5")>-1;this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom &&
!this.opera5)?1:0;this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom &&
!this.opera5)?1:0;this.ie4=(Y7.all && !this.dom &&
!this.opera5)?1:0;this.ie=this.ie4||this.ie5||this.ie6;this.mac=this.agent.indexOf("Mac")>-1;this.n
s6=(this.dom && parseInt(this.ver)>=5)?1:0;this.ns4=(Y7.layers &&
!this.dom)?1:0;this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5);return
this}bw=new B8();z=0;b=0;g="";if(bw.opera5||bw.ns6){b=2};if(bw.ie){g=" style='width:
100%'"}else{z=6}mt=70;ml=10;w=129;mh=23;mw=ml-w;k=0;mt=mt-z;p="<a class='mi'"+g+" href='";q="'
title='";r=""; return true' onmouseout='window.status=""; return true'>";t="</a>";a="'
onmouseover='window.status="";v="<div class=sp></div>";
m=new Array();n=new Array();s=new Array();sw=new Array();su=new Array();st=new Array()
m[0]='Mi familia';n[0]='#';sw[0]=120;su[0]='Mi familia';st[0]="";s[0]=""
+p+"page1.html"+q+a+"familia"+r+"familia"+t
+p+"page2.html"+q+a+"mi novio"+r+"mi novio"+t
m[1]='fotos';n[1]='#';sw[1]=140;su[1]='fotos';st[1]="";s[1]=""
+p+"http://www.pozoseco.com"+q+a+"pueblo"+r+"pueblo"+t
+p+"page3.html"+q+a+""+r+""+t
m[2]='';n[2]='#';sw[2]=130;su[2]='';st[2]="";s[2]=""
+p+"page.html"+q+a+""+r+""+t
+p+"page.html"+q+a+""+r+""+t
+p+"page.html"+q+a+""+r+""+t
+p+"page.html"+q+a+""+r+""+t
m[3]='';n[3]='#';sw[3]=130;su[3]='';st[3]="";s[3]=""
+p+"page.html"+q+a+""+r+""+t
ma=m.length
if (k==1) {mw2=ml-w;
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute;
top:"+(mt+mh)+";left:"+(mw+=w+2)+";width:"+(sw[i]-b)+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute;
top:"+mt+";left:"+(mw2+=w+2)+";width:"+w+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
else {mw2=mt-mh;mt2=mt-mh+2
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute;
top:"+(mt2+=(mh+1))+";left:"+(ml+w-10)+";width:"+sw[i]+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute;
top:"+(mw2+=(mh+1))+";left:"+ml+";width:"+w+"' onmouseover='o["+i+"].showIt()'
onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
function lib_obj(obj,nest){nest=(!nest) ? "":'document.'+nest+'.';this.evnt=bw.dom?
document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers."
+obj):0;this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;this.ref=bw.dom||bw.ie4?document:this.css
.document;this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;this.y=parseI
nt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0;return this}
function lib_doc_size(){this.x=0;this.x2=bw.ie &&
document.body.offsetWidth-20||innerWidth||0;this.y=0;this.y2=bw.ie &&
document.body.offsetHeight-5||innerHeight||0;this.x50=this.x2/2;this.y50=this.y2/2;return this;}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
function libinit(){page=new lib_doc_size();o=new Array();for (i=0; i < ma; i++){o[i]=new
lib_obj('sb'+i);o[i].hideIt()}}
libinit();
//-->
espero que podais ayudarme.Gracias
</script>
Hola !!!
Gracias por el menu. A mi me interesa saber como hacer el submenu, podrías mandarme el código para esto por favor ????
Gracias
Gracias por el menu. A mi me interesa saber como hacer el submenu, podrías mandarme el código para esto por favor ????
Gracias
He probado los menus desplegables que tienes y funcionan bien, me gustaria que me pases un ejemplo con submenus
Gracias.
Gracias.
necesito si tu me pudieras facilitar un menu horizontal basico.
gracias
gracias
Hola, me parece un gran aporte, pero necesito una idea de como hacer q este menu vaya hasta unos 3 o 4 niveles más de anidamiento, agradezco de antemano tu ayuda.
Buenos días:
Cómo hago para agregar otras opciones en este mismo menú, solamente veo una opción, pero cuando trato de agregar otro no puedo y no se qué pueda ser????, me puedes ayudar por favor ?????
Gracias.... JB/219
Cómo hago para agregar otras opciones en este mismo menú, solamente veo una opción, pero cuando trato de agregar otro no puedo y no se qué pueda ser????, me puedes ayudar por favor ?????
Gracias.... JB/219
Gracias primo. me sacaste deun apuro....
esque yo hice otro menu desplegable pero me daba uploads innecesarios
esque yo hice otro menu desplegable pero me daba uploads innecesarios
la idea del menu esta muy buena, gracias por el codigo, solamente quiero preguntar si es posible uno tener un menu desplegable hacia la derecha en un frame izquierdo sin que se coloque encima del frame central.
gracias por la ayuda.
hasta la proxima
gracias por la ayuda.
hasta la proxima
Bueno, tu pregunta es muy interesante.
Lo que puedo decirte, es que hay que jugar con los parent del objeto window. Para esto, debemos tener claro el uso de la etiqueta DIV, como la utilización de las capas en una página Web.
Espero que puedas remodelar el código para hacer un menú a tu gusto y con algunas mejoras.
Lo que puedo decirte, es que hay que jugar con los parent del objeto window. Para esto, debemos tener claro el uso de la etiqueta DIV, como la utilización de las capas en una página Web.
Espero que puedas remodelar el código para hacer un menú a tu gusto y con algunas mejoras.
Mu wenas:
Lo primero es agradecerte el codigo, ya que estoy empezando en esto del javascript y me ha ayudado bastante pa\'medio comprenderlo.
Lo segundo es pedir ayuda para hacerlo con varios despleglables, ya q en estos 3 dias lo he intentao de todos modos y no me sale, ocurre de`to menos lo q kiero hacer. Solo lo consigo hacer con \'onclik\' y eso me parece realmente cutre
Muxas gracias y 1 saludo a todos. A seguir estrujandose la cabeza.
Lo primero es agradecerte el codigo, ya que estoy empezando en esto del javascript y me ha ayudado bastante pa\'medio comprenderlo.
Lo segundo es pedir ayuda para hacerlo con varios despleglables, ya q en estos 3 dias lo he intentao de todos modos y no me sale, ocurre de`to menos lo q kiero hacer. Solo lo consigo hacer con \'onclik\' y eso me parece realmente cutre
Muxas gracias y 1 saludo a todos. A seguir estrujandose la cabeza.
amigo quisiera saber como reproducir la funcion para crear un menu de varias opciones y que cada uno al ser enfocado se despliegue independientemente o que no se muestre uno sobre el anterior
Mira deje una consulta en el foro por un roblema que tengo con un menu desplegable hecho en java script, no me funciona con el Internet explorer 6.0; ¿me puedas ayudar con esta consulta?
Mira, no tengo tan claro el sistema de manejo del Internet Explorer 6.0, ya que yo normalmente utilizo el 5.5, pero de todas formas puedes validar el código para ver qué clase de navegador posee el usuario. Me da la impresión, pero no estoy muy seguro, es de la utilización de ls capas en tu explorador, de todas formas voy a averiguar lo que sucede con exploradores posteriores al mío y ojalá después te pueda tener una respuesta concreta.
La forma de validar el Explorador es con el siguiente código.
explorador=window.navigator.appName;
Aquí la variable explorador, guarda el nomrbe del navegador de internet.
Ahora si quieres rescatar la versión.
versionex=parseInt(window.navigator.appVersion);
De todas formas, hay unas cuantas sentencias para detectar navegador. En cuanto a tu problema con Internet Explorer, veré la posibilidad de recopilar información en la utilización de capas y de la etiqueta <DIV>.
Atte Wolverine
La forma de validar el Explorador es con el siguiente código.
explorador=window.navigator.appName;
Aquí la variable explorador, guarda el nomrbe del navegador de internet.
Ahora si quieres rescatar la versión.
versionex=parseInt(window.navigator.appVersion);
De todas formas, hay unas cuantas sentencias para detectar navegador. En cuanto a tu problema con Internet Explorer, veré la posibilidad de recopilar información en la utilización de capas y de la etiqueta <DIV>.
Atte Wolverine
Muchas Gracias por poner en la pagian un menu de ese tipo que lo estaba buscadno hace mucho tiempo.
Queria consultar en el caso de que fueran varias opciones de menu que seria lo que cambiaria o se agreraria
chau
GRACIAS
Queria consultar en el caso de que fueran varias opciones de menu que seria lo que cambiaria o se agreraria
chau
GRACIAS
tengo una gran duda y quisiera saber si me podrias echar un mano.quiero hacer un menu como el de esta pagina www.uida.es/menudespleg.html.
Si pudieras contestar lo antes posible seria un gran placer.Muxas gracais
Si pudieras contestar lo antes posible seria un gran placer.Muxas gracais
Hola, te hago una pregunta, espero q puedas responderme porque me estoy volviendo loco. Como hago para q el menu desplegable salga de un boton de la botonera (q en realidad es una imagen GIF)
como hago para usar este menu en forma vertical sin que las opciones se desplazen por debajo del siguiente menu
como hago para usar este menu en forma vertical sin que las opciones se desplazen por debajo del siguiente menu gracias muy bueno este menú
tengo un problema en mi pagina principal, ya que necesito un menu de imagen en la cual al pasar el mouse aparezca su listado, ya lo intenté con un java script pero al momento de presentarse en la página principal aparece el error URL no base definida