Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Menu desplegable

Código de JavaScript - Menu desplegable

Volver
Agregar Código Fuente
<<>>

Versión 1
estrellaestrellaestrellaestrellaestrella(20)

Publicado el 19 de Octubre del 2005gráfica de visualizaciones de la versión: Versión 1
169.407 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)

Rodrigo Nocera
19 de Octubre del 2005
estrellaestrellaestrellaestrellaestrella
La verdad está bárbaro este código. Carlos Guimaraenz te felicito y gracias por compartirlo.
Responder
guayo
25 de Octubre del 2005
estrellaestrellaestrellaestrellaestrella
excelente codigo
Responder
Alex
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
Francisco gonzalez
17 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
falta ver que version de explorer usas...
Responder
Adilson
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
Chafateclas
14 de Diciembre del 2005
estrellaestrellaestrellaestrellaestrella
No funciona ni cambiando las comillas que parecen estar mal.
Responder
Gordon Gross
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
José
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
Tuli
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
oswaldo Granados
28 de Septiembre del 2006
estrellaestrellaestrellaestrellaestrella
Excelente codigo bro!! gracias por compartirlo SALUDOS
Responder
Niquel
3 de Octubre del 2006
estrellaestrellaestrellaestrellaestrella
Verdaderamente malo. Esta versión funciona en Firefox.

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
<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
javier
14 de Junio del 2007
estrellaestrellaestrellaestrellaestrella
Estimado es un ejemplo bueno
Responder
Cecilia
21 de Agosto del 2007
estrellaestrellaestrellaestrellaestrella
si abris el menu, se corre todo lo que tengas abajo...
Responder
Ricardo
13 de Mayo del 2009
estrellaestrellaestrellaestrellaestrella
Muy buen diseño y practicidad.
Responder
pepe
10 de Marzo del 2010
estrellaestrellaestrellaestrellaestrella
Hola, por favor, no uses la comic sans!!!!
Responder
yemino
6 de Febrero del 2011
estrellaestrellaestrellaestrellaestrella
Malo, incluso con las modificaciones de Niquel.

Con chrome se ve horrible.
Responder
yacelis
4 de Mayo del 2011
estrellaestrellaestrellaestrellaestrella
donde esta la respuesta no la veo
esto si es chinvo cambien eso.osea
Responder
maria
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:

1
2
3
4
5
6
7
8
9
10
<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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s1255