Tema: problemas con menu desplegable
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 18/12/2009, 06:47
Avatar de Adler
Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
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;" />