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

Menu desplegablegráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(17)
Publicado el 19 de Octubre del 2005 por Carlos Guimaraenz
138.876 visualizaciones desde el 19 de Octubre del 2005. Una media de 294 por semana
Sencilla función en JavaScript de un menú con items desplegables.
Para IE.

Versión 1
estrellaestrellaestrellaestrellaestrella(17)

Publicado el 19 de Octubre del 2005gráfica de visualizaciones de la versión: Versión 1
138.877 visualizaciones desde el 19 de Octubre del 2005. Una media de 294 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella
<!-- 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>

Comentarios sobre la versión: Versión 1 (17)

19/10/2005Rodrigo Nocera
estrellaestrellaestrellaestrellaestrella
La verdad está bárbaro este código. Carlos Guimaraenz te felicito y gracias por compartirlo.
25/10/2005guayo
estrellaestrellaestrellaestrellaestrella
excelente codigo
28/10/2005Alex
estrellaestrellaestrellaestrellaestrella
Sería útil pero sólo funciona en explorer, mala cosa si se considera que sólo firefox ya tiene 100 millones de descargas,
15/11/2005Adilson
estrellaestrellaestrellaestrellaestrella
La verdad es que no se si es tan bueno como dicen porque no me funciono ...si el autor lee esto mejor que me diga que paso que no me trabajo ese codigo y todos los otros si trabajaron .....bueno.....espero me respondas mas.....
14/12/2005Chafateclas
estrellaestrellaestrellaestrellaestrella
No funciona ni cambiando las comillas que parecen estar mal.
23/12/2005Gordon Gross
estrellaestrellaestrellaestrellaestrella
Exelente, funciona esta claro que hay que remplazar todo el còdigo del archivo htm por el suministrado por Carlos y listo.
15/03/2006José
estrellaestrellaestrellaestrellaestrella
Es muy bueno, pero es una lástima que sólo sirva para Internet Explorer; en Firefox se ven todos los botones montados unos encima de otros cuando están recogidos... miraré si hay una forma de adaptarlo a todos los navegadores... Hoy en día uno no se puede dar el lujo de hacer un código para un solo navegador...
20/04/2006Tuli
estrellaestrellaestrellaestrellaestrella
Esta bastante bien, no me parece un gran diseño para una web, claro que eso ya depende de cada uno, pero en lo que me baso para valorarlo como negativo es en lo ya comentado por otras personas, y es que solo furula en IE Explorer, pero bueno, asias de todas formas por darlo a concer. Un Saludo.
28/09/2006oswaldo Granados
estrellaestrellaestrellaestrellaestrella
Excelente codigo bro!! gracias por compartirlo SALUDOS
03/10/2006Niquel
estrellaestrellaestrellaestrellaestrella
Verdaderamente malo. Esta versión funciona en Firefox.

<html>
<style>
button {width: 150px}
.botonMenuDespl {margin-left: 5px; width: 120px}
.AereosVisible {display:inline;visibility: \"visible\"; margin-bottom: -15px}
.AereosOculto {display:none;visibility: \"hidden\"; margin-top: -190px}
.MarinosVisible {display:inline;visibility: \"visible\"; margin-bottom: -15px}
.MarinosOculto {display:none;visibility: \"hidden\"; margin-top: -160px}
.TerrestresVisible {display:inline;visibility: \"visible\"; margin-bottom: -15px}
.TerrestresOculto {display:none;visibility: \"hidden\"; margin-top: -130px}
</style>

<script>
function Menu(id_Div,nombre) {
var divObj=document.getElementById(id_Div);
if(divObj.className == nombre + \"Oculto\") {
divObj.className = nombre + \"Visible\";
} else {
divObj.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>
14/06/2007javier
estrellaestrellaestrellaestrellaestrella
Estimado es un ejemplo bueno
21/08/2007Cecilia
estrellaestrellaestrellaestrellaestrella
si abris el menu, se corre todo lo que tengas abajo...
13/05/2009Ricardo
estrellaestrellaestrellaestrellaestrella
Muy buen diseño y practicidad.
10/03/2010pepe
estrellaestrellaestrellaestrellaestrella
Hola, por favor, no uses la comic sans!!!!
06/02/2011yemino
estrellaestrellaestrellaestrellaestrella
Malo, incluso con las modificaciones de Niquel.

Con chrome se ve horrible.
04/05/2011yacelis
estrellaestrellaestrellaestrellaestrella
donde esta la respuesta no la veo
esto si es chinvo cambien eso.osea
07/02/2012maria
estrellaestrellaestrellaestrellaestrella
excelente!! carlos te he enviado un correo ojala puedas ayudarme!!
gracias!!

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios