Foros del Web » Programando para Internet » Javascript »

Menu con tamaño variable

 Estas en el tema de Menu con tamaño variable en el foro de Javascript en Foros del Web. Hola, estoy armando un menu y todavia no le encuentro la vuelta. El tema es que lo que quiero hacer es que este menu con ...
  #1 (permalink)  
Antiguo 16/12/2003, 18:18
 
Fecha de Ingreso: enero-2002
Mensajes: 73
Antigüedad: 22 años, 3 meses
Puntos: 0
Menu con tamaño variable
Hola, estoy armando un menu y todavia no le encuentro la vuelta. El tema es que lo que quiero hacer es que este menu con imagenes que tengo armado que por ejemplo esta compuesto por:

Empresa
Servicios
Turismo
Viajes
Contactenos

Al colocar el mouse por ejemplo en Turismo quisiera que Viajes y Contactenos se desplace hacia abajo y pueda ver el submenu de Turismo (Turismo Bs As, Turismo Uruguay, etc.), debajo de Turismo y al sacar el mouse de esos links, los links de abajo (Viajes y Contactenos) vuelvan a su lugar original.
Aca les dejo el codigo del menu que tengo acualmente que lo que hace es mostrar el submenu al costado.
Muchas gracias y saludos!
Erika.

<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_nbGroup(event, grpName) { //v3.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
if ((nbArr = document[grpName]) != null)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<script language="JavaScript">
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('graficos/menu/empresariales.gif',
'graficos/menu/empresariales2.gif','graficos/menu/empresa2.gif','graficos/menu/servicios2.gif',
'graficos/menu/sociales2.gif','graficos/menu/turismo2.gif','graficos/menu/cotizaciones2.gif',
'graficos/menu/contactenos2.gif','graficos/menu/turismoba2.gif','graficos/menu/turismoar2.gif');
MM_showHideLayers('Layer1','','hide')">
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td><a href="empresa.html" target="_top" onClick="MM_nbGroup('down','group1','empresa','',1 )" onMouseOver="MM_nbGroup('over','empresa','graficos/menu/empresa2.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="empresa" src="graficos/menu/empresa.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="servicios.html" target="_top" onClick="MM_nbGroup('down','group1','servicios','' ,1)" onMouseOver="MM_nbGroup('over','servicios','grafic os/menu/servicios2.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="servicios" src="graficos/menu/servicios.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="sociales.html" target="_top" onClick="MM_nbGroup('down','group1','sociales','', 1)" onMouseOver="MM_nbGroup('over','sociales','grafico s/menu/sociales2.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="sociales" src="graficos/menu/sociales.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="empresariales.html" target="_top" onClick="MM_nbGroup('down','group1','empresariales ','',1)" onMouseOver="MM_nbGroup('over','empresariales','gr aficos/menu/empresariales2.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="empresariales" src="graficos/menu/empresariales.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','turismo','gra ficos/menu/turismo2.gif',1)" onMouseOver="MM_nbGroup('over','turismo','graficos/menu/turismo2.gif','graficos/menu/turismo2.gif',1);MM_showHideLayers('Layer1','','sh ow')" onMouseOut="MM_nbGroup('out')"><img name="turismo" src="graficos/menu/turismo.gif" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="cotizaciones.asp" target="_top" onClick="MM_nbGroup('down','group1','cotizacion',' ',1)" onMouseOver="MM_nbGroup('over','cotizacion','grafi cos/menu/cotizaciones2.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="cotizacion" src="graficos/menu/cotizaciones.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="contactenos.asp" target="_top" onClick="MM_nbGroup('down','group1','contactenos', '',1)" onMouseOver="MM_nbGroup('over','contactenos','graf icos/menu/contactenos2.gif','graficos/menu/empresariales.gif',1)" onMouseOut="MM_nbGroup('out')"><img name="contactenos" src="graficos/menu/contactenos.gif" border="0" onLoad=""></a></td>
</tr>
</table>
<div id="Layer1" style="position:absolute; width:200px; height:52px; z-index:1; left: 198px; top: 100px; onMouseOut="MM_nbGroup('out')">
<table width="75%" border="0" cellpadding="4">
<tr>
<td><a href="turismoar.html" target="_top" onClick="MM_nbGroup('down','group1','turismoar','g raficos/menu/turismoba2.gif',1)" onMouseOver="MM_nbGroup('over','turismoar','grafic os/menu/turismoar2.gif','graficos/menu/turismoba2.gif',1)" onMouseOut="MM_nbGroup('out'); MM_showHideLayers('Layer1','','hide')" ><img src="graficos/menu/turismoar.gif" border="0" name="turismoar"></a></td>
</tr>
<tr>
<td><a href="turismoba.html" target="_top" onClick="MM_nbGroup('down','group1','turismoba','g raficos/menu/turismoba2.gif',1)" onMouseOver="MM_nbGroup('over','turismoba','grafic os/menu/turismoba2.gif','graficos/menu/turismoba2.gif',1)" onMouseOut="MM_nbGroup('out')"><img src="graficos/menu/turismoba.gif" width="250" height="17" border="0" name="turismoba"></a></td>
</tr>
</table>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 17/12/2003, 03:37
Avatar de jercer  
Fecha de Ingreso: octubre-2003
Mensajes: 373
Antigüedad: 20 años, 6 meses
Puntos: 13
Pon justo debajo de ese menu una capa con display:none y en el evento onmousemove de Viajes dale el estilo display:inline y en el onmouseout otra vez display:none.

La capa que contenga Viajes (con los eventos), que contenga tambien la capa de los submenus para que cuando se mueva por estos, siga cogiendo el onmousemove.
  #3 (permalink)  
Antiguo 18/12/2003, 17:56
 
Fecha de Ingreso: enero-2002
Mensajes: 73
Antigüedad: 22 años, 3 meses
Puntos: 0
Te agradezco la ayuda, pero la verdad es que lo probe y no me funciona. Se te ocurre alguna otra idea?
Gracias, Erika.
  #4 (permalink)  
Antiguo 19/12/2003, 03:32
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 20 años, 10 meses
Puntos: 1
checate este script:
http://www.conxiondesigns.com/tutori...ript/hideshow/

aqui esta el demo:

http://www.conxiondesigns.com/tutori...sthideshow.php

lo unico que tienes que hacer para que funcione como quieres es cambiar el visibility:hidden por display:none y el visibility: visible por display:block
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #5 (permalink)  
Antiguo 19/12/2003, 04:12
Avatar de jercer  
Fecha de Ingreso: octubre-2003
Mensajes: 373
Antigüedad: 20 años, 6 meses
Puntos: 13
Yo me refería a algo como esto, y si me funciona, al menos creo que es lo que pides tu:

<table onmouseover="oculto.style.display='inline';oculto. style.visibility='visible';" onmouseout="oculto.style.display='none';oculto.sty le.visibility='hidden';">
<tr><td>XXXXX</td></tr>
<tr name="oculto" id="oculto" style="display:none;visibility:hidden;">
<td>XXXXX 1</td>
<td>XXXXX 2</td>
</tr>
</table>

Igual que con tablas sería con capas.
  #6 (permalink)  
Antiguo 19/12/2003, 05:37
Avatar de tunait
Moderadora
  
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
DHTML....
trasladado al foro de javascript

movido desde html

saludos
  #7 (permalink)  
Antiguo 19/12/2003, 18:55
 
Fecha de Ingreso: enero-2002
Mensajes: 73
Antigüedad: 22 años, 3 meses
Puntos: 0
Cracias por su ayuda chicos!! ya casi lo tengo, pero todavia me esta faltando arreglar un error. A ver si me ayudan con esta y no los molesto mas. Aca abajo les dejo el codigo y el link para ver lo que esta haciando.
Mil gracias!!!!

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_nbGroup(event, grpName) { //v3.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
if ((nbArr = document[grpName]) != null)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('graficos/menu/empresariales.gif',
'graficos/menu/empresariales2.gif','graficos/menu/empresa2.gif','graficos/menu/servicios2.gif',
'graficos/menu/sociales2.gif','graficos/menu/turismo2.gif','graficos/menu/cotizaciones2.gif',
'graficos/menu/contactenos2.gif','graficos/menu/turismoba2.gif','graficos/menu/turismoar2.gif');
MM_showHideLayers('Layer2','','show')">
<div id="Layer1" style="position:absolute; width:126px; height:52px; z-index:1; left: 10px;
top: 89px; onMouseOut="MM_nbGroup('out')">
<table border="0" cellpadding="4" cellspacing="0" width="192">
<tr>
<td><a href="empresa.html" target="_top" onClick="MM_nbGroup('down','group1','empresa',''
,1)" onMouseOver="MM_nbGroup('over','empresa','graficos/menu/empresa2.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img name="empresa" src="graficos/menu/empresa.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="servicios.html" target="_top" onClick="MM_nbGroup('down','group1',
'servicios','',1)" onMouseOver="MM_nbGroup('over','servicios','grafic os/menu/servicios2.gif',
'',1)" onMouseOut="MM_nbGroup('out')">
<img name="servicios" src="graficos/menu/servicios.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="sociales.html" target="_top" onClick="MM_nbGroup('down','group1','sociales','',
1)" onMouseOver="MM_nbGroup('over','sociales','grafico s/menu/sociales2.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img name="sociales" src="graficos/menu/sociales.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="empresariales.html" target="_top" onClick="MM_nbGroup('down','group1',
'empresariales','',1)" onMouseOver="MM_nbGroup('over','empresariales','gr aficos/menu/empresariales2.gif',
'',1)" onMouseOut="MM_nbGroup('out')">
<img name="empresariales" src="graficos/menu/empresariales.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td onmouseover="oculto.style.display='inline';oculto. style.visibility='visible';oculto2.style.display=' none';oculto2.style.visibility='hidden';"
onmouseout="oculto.style.display='none';oculto.sty le.visibility='hidden';">
<a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','turismo',
'graficos/menu/turismo2.gif',1)" onMouseOver="MM_nbGroup('over','turismo',
'graficos/menu/turismo2.gif','graficos/menu/turismo2.gif',1)"
onMouseOut="MM_nbGroup('out')"> <img name="turismo" src="graficos/menu/turismo.gif" border="0" onload=""></a>
<div id="oculto" name="oculto" style="display:none;visibility:hidden;"
onmouseover="oculto2.style.display='none';oculto2. style.visibility='hidden';"
onmouseout="oculto2.style.display='inline';oculto2 .style.visibility='visible';" >
<table width="31%" border="0" cellpadding="4">
<tr>
<td><a href="turismoar.html" target="_top" onClick="MM_nbGroup('down','group1','turismoar','g raficos/menu/turismoba2.gif',1)" onMouseOver="MM_nbGroup('over','turismoar','grafic os/menu/turismoar2.gif','graficos/menu/turismoba2.gif',1)" onMouseOut="MM_nbGroup('out')" ><img src="graficos/menu/turismoar.gif" border="0" name="turismoar"></a></td>
</tr>
<tr>
<td><a href="turismoba.html" target="_top" onClick="MM_nbGroup('down','group1','turismoba','g raficos/menu/turismoba2.gif',1)" onMouseOver="MM_nbGroup('over','turismoba','grafic os/menu/turismoba2.gif','graficos/menu/turismoba2.gif',1)" onMouseOut="MM_nbGroup('out')"><img src="graficos/menu/turismoba.gif" width="250" height="17" border="0" name="turismoba"></a></td>
</tr>
<tr>
<td><a href="cotizaciones.asp" target="_top" onClick="MM_nbGroup('down','group1','cotizacion',' ',1)" onMouseOver="MM_nbGroup('over','cotizacion','grafi cos/menu/cotizaciones2.gif','',1)" onMouseOut="MM_nbGroup('out')"><img name="cotizacion" src="graficos/menu/cotizaciones.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td height="29"><a href="contactenos.asp" target="_top" onClick="MM_nbGroup('down','group1','contactenos', '',1)" onMouseOver="MM_nbGroup('over','contactenos','graf icos/menu/contactenos2.gif','graficos/menu/empresariales.gif',1)" onMouseOut="MM_nbGroup('out')"><img name="contactenos" src="graficos/menu/contactenos.gif" border="0" onLoad=""></a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>


<div id="oculto2" name="oculto2" style="display:inline;visibility:visible;">
<table border="0" cellpadding="4" cellspacing="0" width="190">
<tr>
<td>
<a href="cotizaciones.asp" target="_top" onClick="MM_nbGroup
('down','group1','cotizacion','',1)" onMouseOver="MM_nbGroup
('over','cotizacion','graficos/menu/cotizaciones2.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img name="cotizacion" src="graficos/menu/cotizaciones.gif" border="0" onLoad=""></a></td>
</tr>
<tr>
<td><a href="contactenos.asp" target="_top" onClick="MM_nbGroup
('down','group1','contactenos','',1)" onMouseOver="MM_nbGroup('over','contactenos',
'graficos/menu/contactenos2.gif','graficos/menu/empresariales.gif',1)"
onMouseOut="MM_nbGroup('out')">
<img name="contactenos" src="graficos/menu/contactenos.gif" border="0" onLoad=""></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>

www.tech-services.com.ar/ckm/menu.html
Última edición por erika; 19/12/2003 a las 18:57
  #8 (permalink)  
Antiguo 20/12/2003, 10:30
 
Fecha de Ingreso: enero-2002
Mensajes: 73
Antigüedad: 22 años, 3 meses
Puntos: 0
Gracias chicos!! Ya le encontre la vuelta y el menu me anda de 10!!!
Mil Gracias.
Erika
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:57.