JavaScript - Menu desplegable

   
Vista:

Menu desplegable

Publicado por Rafael Monroy (1 intervención) el 08/02/2008 22:37:40
estoy aprendiendo HTML, y un poco de javascript, encontre el codigo para botones con menu despleglabe lo copie en mi editor "dreamweaver" y obtuve como resultado botones sobre mas botones, como hago?

el codigo esta en

http://www.lawebdelprogramador.com/codigo/codigo.php
idp=1255&id=45&texto=JavaScript
por Carlos Guimaraenz
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

RE:Menu desplegable

Publicado por ScriptShow (387 intervenciones) el 09/02/2008 19:31:29
Saludos Rafael,

El menú es así. Si lo que pretendes es otro aspecto, prueba así:

<!--
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; border: 1px solid; background: #EFEFEF}
.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 class=BotonMenuDespl 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 class=BotonMenuDespl 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 class=BotonMenuDespl 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>

Si lo que necesitas es otra cosa, olvídate de modificarlo; aunque con retoques en los estilos se pueden hacer bastantes cambios de aspecto.

Tú decides.
Espero te sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar