Menú desplegable (obsequio de Wolverine a mis amigos del foro)

Wolverine
04 de Abril del 2005
<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.

manuel
04 de Abril del 2005
hola me gustaria q me obsequieras el menu con submenus te lo agradeceria mucho

Francisco
04 de Abril del 2005
porque este menu no funciona en netscape 6.2.2?

Wolverine
04 de Abril del 2005
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

franklin
04 de Abril del 2005
hola amigo, como puedo hacer que me aparescan mas menus desplegables y que aparezca mas al centro y un poco mas abajo.

evapc
04 de Abril del 2005
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>

Vivia
04 de Abril del 2005
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

gisela
04 de Abril del 2005
super!! me sirvio muchisimo gracias!!

Josevi
04 de Abril del 2005
He probado los menus desplegables que tienes y funcionan bien, me gustaria que me pases un ejemplo con submenus
Gracias.

Patricia
04 de Abril del 2005
necesito si tu me pudieras facilitar un menu horizontal basico.

gracias

malomoto
04 de Abril del 2005
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.

Joan Bravo
04 de Abril del 2005
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

Gu
04 de Abril del 2005
Gracias primo. me sacaste deun apuro....
esque yo hice otro menu desplegable pero me daba uploads innecesarios

Sanchopolis
04 de Abril del 2005
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

Wolverine
04 de Abril del 2005
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.

Morris
04 de Abril del 2005
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.

anam103
04 de Abril del 2005
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

david
04 de Abril del 2005
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?

Wolverine
04 de Abril del 2005
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

German
04 de Abril del 2005
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

Amparo
04 de Abril del 2005
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

pablolentini
04 de Abril del 2005
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)

dddy
04 de Abril del 2005
como hago para usar este menu en forma vertical sin que las opciones se desplazen por debajo del siguiente menu

dddy
04 de Abril del 2005
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ú

evaldez
04 de Abril del 2005
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

fabyola
04 de Abril del 2005
por favor me podrias ayudar, quiero saber como hacer los sub-menu y si me puedes mandar algun ejemplo ojala y recivas pronto este correo y me puedas contestar rapido
muchisiiiimas gracias