Código de JavaScript - Menu desplegable

sin imagen de perfil

Menu desplegablegráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(20)
Publicado el 19 de Octubre del 2005 por Carlos Guimaraenz
163.133 visualizaciones desde el 19 de Octubre del 2005
Sencilla función en JavaScript de un menú con items desplegables.
Para IE.

Versión 1
estrellaestrellaestrellaestrellaestrella(20)

Publicado el 19 de Octubre del 2005gráfica de visualizaciones de la versión: Versión 1
163.134 visualizaciones desde el 19 de Octubre del 2005
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!--
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 (20)

19 de Octubre del 2005
estrellaestrellaestrellaestrellaestrella
La verdad está bárbaro este código. Carlos Guimaraenz te felicito y gracias por compartirlo.
Responder
25 de Octubre del 2005
estrellaestrellaestrellaestrellaestrella
excelente codigo
Responder
28 de Octubre del 2005
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,
Responder
Imágen de perfil
17 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
falta ver que version de explorer usas...
Responder
15 de Noviembre del 2005
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.....
Responder
14 de Diciembre del 2005
estrellaestrellaestrellaestrellaestrella
No funciona ni cambiando las comillas que parecen estar mal.
Responder
23 de Diciembre del 2005
estrellaestrellaestrellaestrellaestrella
Exelente, funciona esta claro que hay que remplazar todo el còdigo del archivo htm por el suministrado por Carlos y listo.
Responder
15 de Marzo del 2006
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...
Responder
20 de Abril del 2006
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.
Responder
28 de Septiembre del 2006
estrellaestrellaestrellaestrellaestrella
Excelente codigo bro!! gracias por compartirlo SALUDOS
Responder
3 de Octubre del 2006
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>
Responder
14 de Junio del 2007
estrellaestrellaestrellaestrellaestrella
Estimado es un ejemplo bueno
Responder
21 de Agosto del 2007
estrellaestrellaestrellaestrellaestrella
si abris el menu, se corre todo lo que tengas abajo...
Responder
13 de Mayo del 2009
estrellaestrellaestrellaestrellaestrella
Muy buen diseño y practicidad.
Responder
10 de Marzo del 2010
estrellaestrellaestrellaestrellaestrella
Hola, por favor, no uses la comic sans!!!!
Responder
6 de Febrero del 2011
estrellaestrellaestrellaestrellaestrella
Malo, incluso con las modificaciones de Niquel.

Con chrome se ve horrible.
Responder
4 de Mayo del 2011
estrellaestrellaestrellaestrellaestrella
donde esta la respuesta no la veo
esto si es chinvo cambien eso.osea
Responder
7 de Febrero del 2012
estrellaestrellaestrellaestrellaestrella
excelente!! carlos te he enviado un correo ojala puedas ayudarme!!
gracias!!
Responder
Mateo
4 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
copado!
Responder
yoryorojas
1 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
Cambien estas lineas:

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

funciona en todos los navegadores.

:D
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1255
Revisar política de publicidad