Utilizamos cookies propias y de terceros para mejorar la experiencia de navegación, y ofrecer contenidos y publicidad de interés.
Al continuar con la navegación entendemos que se acepta nuestra política de cookies.
Iniciar sesión Cerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta

Código de JavaScript - Menu desplegable

Titulo:local

Menu desplegable

Autor:Carlos Guimaraenz (charlie_golf_83@hotmail.com)
Lenguaje:JavaScript
Sencilla función en JavaScript de un menú con items desplegables.
Para IE.

<!-- Código de un menú desplegable. Cada botón principal llama a la función Menu con sus respectivos parámetros y cambia la clase de su DIV correspondiente a NOMBREVisible o NOMBREOculto. Éstos manejan a su vez la separación con el menú superior. Éstos datos deben ser modificados en relación a la cantidad de items que tenga cada menú. --> <html> <style> button {width: 150px} .botonMenuDespl {margin-left: 5px; width: 120px} .AereosVisible {visibility: "visible"; margin-bottom: -15px} .AereosOculto {visibility: "hidden"; margin-top: -190px} .MarinosVisible {visibility: "visible"; margin-bottom: -15px} .MarinosOculto {visibility: "hidden"; margin-top: -160px} .TerrestresVisible {visibility: "visible"; margin-bottom: -15px} .TerrestresOculto {visibility: "hidden"; margin-top: -130px} </style> <script> function Menu(id_Div,nombre) { if(id_Div.className == nombre + "Oculto") { id_Div.className = nombre + "Visible"; } else { id_Div.className = nombre + "Oculto"; } } </script> <body> <button onclick="Menu(DivAereos, 'Aereos')">Vehículos aéreos</button><br> <div id=DivAereos class=AereosOculto> <br> <table cellspacing=0> <tr> <td><span style="font: 15pt comic sans ms; color: #AAAAFF">»</span></td> <td><button class=BotonMenuDespl>Transportes</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: #AAAAFF">»</span></td> <td><button class=BotonMenuDespl>Deportivos</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: #AAAAFF">»</span></td> <td><button class=BotonMenuDespl>Militares</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: #AAAAFF">»</span></td> <td><button class=BotonMenuDespl>Helicópteros</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: #AAAAFF">»</span></td> <td><button class=BotonMenuDespl>Planeadores</button></td> </tr> </table> </div> <br><br> <button onclick="Menu(DivMarinos, 'Marinos')">Vehículos marinos</button><br> <div id=DivMarinos class=MarinosOculto> <br> <table cellspacing=0> <tr> <td><span style="font: 15pt comic sans ms; color: blue">»</span></td> <td><button class=BotonMenuDespl>Petroleros</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: blue">»</span></td> <td><button class=BotonMenuDespl>Areneros</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: blue">»</span></td> <td><button class=BotonMenuDespl>Militares</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: blue">»</span></td> <td><button class=BotonMenuDespl>Remolcadores</button></td> </tr> </table> </div> <br><br> <button onclick="Menu(DivTerrestres, 'Terrestres')">Vehículos terrestres</button><br> <div id=DivTerrestres class=TerrestresOculto> <br> <table cellspacing=0> <tr> <td><span style="font: 15pt comic sans ms; color: brown">»</span></td> <td><button class=BotonMenuDespl>Automóviles</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: brown">»</span></td> <td><button class=BotonMenuDespl>Ómnibus</button></td> </tr> <tr> <td><span style="font: 15pt comic sans ms; color: brown">»</span></td> <td><button class=BotonMenuDespl>Motocicletas</button></td> </tr> </table> </div> </body> </html>