Foros del Web » Programando para Internet » Javascript »

problemas con menu desplegable

 Estas en el tema de problemas con menu desplegable en el foro de Javascript en Foros del Web. hola a todos, he creado un menu desplegable con javascript. lo que hago es que al pulsar en una opcion del menu esta se desplega, ...
  #1 (permalink)  
Antiguo 18/12/2009, 05:40
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 15 años, 2 meses
Puntos: 0
problemas con menu desplegable
hola a todos,
he creado un menu desplegable con javascript.
lo que hago es que al pulsar en una opcion del menu esta se desplega, y cuando hago otra vez click en ella se recoge.
lo que quiero conseguir, es que si yo tengo un menu desplegado, al hacer click en otra opcion del menu esta de despliegue y la otra se recoja, no se si me explico.
os paso el codigo.
muchas graicias

<script type="text/javascript">
function unFold(id){
var visible = document.getElementById('foldinglist' + id).style.display;
if(visible == "none"){
document.getElementById('foldinglist' + id).style.display = "block";
}else{
document.getElementById('foldinglist' + id).style.display = "none";
}
}
</script>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../estilos/letra.css" rel="stylesheet" type="text/css">
<link href="../../estilos/links_indices.css" rel="stylesheet" type="text/css">
</head>

<body background="../../imagenes/FondoIzquierda.jpg">
<div align="left"><span class="letra">Museos </span> </div>
<ul>
<a href="arag%F3n/aragon.htm" target="mainFrame" id="foldheader" onclick="unFold(1);"><span class="letra">Aragón</span></a>
<ul id="foldinglist1" style="display:none">
<a href="arag%F3n/tarazona/tarazona.htm" target="mainFrame">Tarazona</a> <br>
<a href="arag%F3n/frescano/frescano.htm" target="mainFrame">Frescano</a><br>
<a href="arag%F3n/borja/borja.htm" target="mainFrame">Borja</a> <br>
<a href="arag%F3n/calatayud/calatayud.htm" target="mainFrame">Calatayud</a>
<br>
<a href="arag%F3n/berrueco/berrueco.htm" target="mainFrame">Berrueco</a> <br>
<a href="arag%F3n/zaragoza/zaragoza.htm" target="mainFrame">Zaragoza</a> <br>
<a href="arag%F3n/caminreal/caminreal.htm" target="mainFrame">Caminreal</a>
<br>
<a href="arag%F3n/teruel/teruel.htm" target="mainFrame">Teruel</a>
</ul>
</ul>


<ul>
<a href="castillaleon/castillaleon.htm" target="mainFrame" id="foldheader" onclick="unFold(2);"><span class="letra">Castilla
Leon</span></a>
<ul id="foldinglist2" style="display:none">
<a href="castillaleon/huerta/huerta.htm" target="mainFrame">Huerta del Rey</a>
<br>
<a href="castillaleon/garray/garray.htm" target="mainFrame">Garray</a> <br>
<a href="castillaleon/osma/osma.htm" target="mainFrame">El Burgo de Osma</a>
<br>
<a href="castillaleon/montejo/montejo.htm" target="mainFrame">Montejo de Tiermes</a>
<a href="castillaleon/medinaceli/medinaceli.htm" target="mainFrame">Medinaceli</a>
<br>
<a href="castillaleon/soria/soria.htm" target="mainFrame">Soria</a>
</ul>
</ul>

<ul>
<a href="castillalamancha/castillalamancha.htm" target="mainFrame" id="foldheader" onclick="unFold(3);"><span class="letra">Castilla
La Mancha</span></a>
<ul id="foldinglist3" style="display:none">
<a href="castillalamancha/saelices/saelices.htm" target="mainFrame">Saelices</a>
<br>
<a href="castillalamancha/cueva/cueva.htm" target="mainFrame">Cueva del Hierro</a>
<br>
<a href="castillalamancha/cuenca/cuenca.htm" target="mainFrame">Cuenca</a>
<br>
<a href="castillalamancha/herreria/herreria.htm" target="mainFrame">Herreria</a>
<br>
<a href="castillalamancha/molina/molina.htm" target="mainFrame">Molina de
Aragón</a>
</ul>
</ul>
  #2 (permalink)  
Antiguo 18/12/2009, 06:47
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: problemas con menu desplegable
Hola

Como habría que rehacer toda la función, aquí tienes un ejemplo

Código Javascript: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <style type="text/css">
  6. .ocultar {display:none;}
  7. .mostrar {display:block;}
  8. .sel {color:#FF0000;}
  9. .nosel {color:#000000;}
  10. .selsub {color:#FFF555;}
  11. .noselsub {color:#000000;}
  12. </style>
  13. <script type="text/javascript">
  14. var visto_subm = null;
  15. var visto_color = null;
  16. function versubmenu(num) {
  17. objhl = document.getElementById(num);
  18. obj = document.getElementById("sub"+num);
  19.  
  20. obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
  21. objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';
  22.  
  23.     if ((visto_subm != null) && (visto_color != null)) {
  24.         visto_subm.className = 'ocultar';
  25.         visto_color.className = 'nosel';
  26.     }
  27. //alert (visto_subm + " - " + visto_color)
  28. //alert (obj + " - " + objhl)
  29. visto_subm = (obj==visto_subm) ? null : obj;
  30. visto_color = (obj==visto_color) ? null : objhl;
  31. }
  32.  
  33.  
  34. var visto_subsubm = null;
  35. var visto_colorSUB = null;
  36. function versubsubmenu(num) {
  37. objhl = document.getElementById(num);
  38. obj = document.getElementById(num + "sub");
  39. obj.className = (obj==visto_subsubm) ? 'ocultar' : 'mostar';
  40. objhl.className = (objhl==visto_colorSUB) ? 'noselsub' : 'selsub';
  41.  
  42.     if ((visto_subsubm != null) && (visto_colorSUB != null)) {
  43.         visto_subsubm.className = 'ocultar';
  44.         visto_colorSUB.className = 'noselsub';
  45.     }
  46.  
  47. visto_subsubm = (obj==visto_subsubm) ? null : obj;
  48. visto_colorSUB = (obj==visto_colorSUB) ? null : objhl;
  49. }
  50. </script>
  51. <head>
  52. </head>
  53. <body>
  54. <div id="0" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU0</div>
  55. <div id="sub0" class="ocultar" style="z-index:1;">
  56. <div id="s00" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
  57. <div id="s00sub" class="ocultar" style="z-index:1;">
  58. ++ SubsubMenu0.0<br />
  59. ++ SubsubMenu0.1<br />
  60. ++ SubsubMenu0.2
  61. </div>
  62. <div id="s01" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
  63. <div id="s01sub" class="ocultar" style="z-index:1;">
  64. ++ SubsubMenu1.0<br />
  65. ++ SubsubMenu1.1
  66. </div>
  67. </div>
  68.  
  69.  
  70. <div id="1" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU1</div>
  71. <div id="sub1" class="ocultar" style="z-index:1;">
  72. <div id="s10" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
  73. <div id="s10sub" class="ocultar" style="z-index:1;">
  74. ++ SubsubMenu0.0<br />
  75. ++ SubsubMenu0.1<br />
  76. ++ SubsubMenu0.2
  77. </div>
  78. <div id="s11" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
  79. <div id="s11sub" class="ocultar" style="z-index:1;">
  80. ++ SubsubMenu1.0<br />
  81. ++ SubsubMenu1.1
  82. </div>
  83. </div>
  84.  
  85.  
  86. <div id="2" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU2</div>
  87. <div id="sub2" class="ocultar" style="z-index:1;">
  88. <div id="s20" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
  89. <div id="s20sub" class="ocultar" style="z-index:1;">
  90. ++ SubsubMenu0.0<br />
  91. ++ SubsubMenu0.1<br />
  92. ++ SubsubMenu0.2
  93. </div>
  94. <div id="s21" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
  95. <div id="s21sub" class="ocultar" style="z-index:1;">
  96. ++ SubsubMenu1.0<br />
  97. ++ SubsubMenu1.1
  98. </div>
  99. </div>
  100.  
  101.  
  102. <div id="3" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU3</div>
  103. <div id="sub3" class="ocultar" style="z-index:1;">
  104. <div id="s30" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
  105. <div id="s30sub" class="ocultar" style="z-index:1;">
  106. ++ SubsubMenu0.0<br />
  107. ++ SubsubMenu0.1<br />
  108. ++ SubsubMenu0.2
  109. </div>
  110. <div id="s31" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
  111. <div id="s31sub" class="ocultar" style="z-index:1;">
  112. ++ SubsubMenu1.0<br />
  113. ++ SubsubMenu1.1
  114. </div>
  115. </div>
  116.  
  117. </body>
  118. </html>

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 18/12/2009, 08:55
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: problemas con menu desplegable
ok, ya lo probare.muchisimas gracias
  #4 (permalink)  
Antiguo 21/12/2009, 02:57
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: problemas con menu desplegable
hola de nuevo, he estado mirando el codigo que me pasaste pero no me sirve pq utiliza colores, y yo ya tengo mis estilos definidos,
me gustaria que fuese un codigo que no utilizara colores.
muchas gracias de todas formas
saludos
  #5 (permalink)  
Antiguo 21/12/2009, 03:20
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: problemas con menu desplegable
he hecho el menu de nuevo, pero no se pq no me funciona en IE8 y si en FIreox:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#foldheader{cursor:hand ; font-weight:bold ; //para que aparezca la mano en el raton
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
ul.menu
{
list-style:none;
}
ul.menu ul /* Para todos los ul debajo del ul.menu */
{
display:none;
list-style:none;
}


/* Esto afecta a todos los ul inmediatamente debajo (el > ) de un li que a su vez esté dentro de un ul.menu */
ul.menu li:hover > ul
{
display:block;
}
</style>
<link href="../../estilos/links_indices.css" rel="stylesheet" type="text/css">
<link href="../../estilos/letra.css" rel="stylesheet" type="text/css">
</head>

<body>
<ul class="menu">
<li><span class="letra">Aragón </span>
<ul>
<li><a href="aragon/tarazona/tarazona.htm">Tarazona</a></li>
<li><a href="aragon/frescano/frescano.htm">Frescano</a></li>
<li><a href="aragon/borja/borja.htm">Borja</a></li>
</ul>
</li>

<li><span class="letra">Castilla León </span>
<ul>

<li><a href="castillaleon/huerta/huerta.htm">Huerta del Rey</a></li>

<li><a href="castillaleon/garray/garray.htm">Garray</a></li>
</ul>
</li>
</ul>
</body>
</html>
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 19:24.