La Web del Programador: Comunidad de Programadores
 
    Pregunta:  7636 - COMO SE HACE UN "MENU DESPLEGABLE EN JAVASCRIPT"
Autor:  Fernando Julianelli
A quien corresponda, y desde ya muchisimas gracias, dado que uno se siente impotente al no poder resolver un problema durante casi 15 días y que para ustedes, es algo mas que sencillo.

Estoy realizando con Dreamweaver3 un sitio personal de prueba, no se programar en JavaScript, y hace apenas 3 meses que estoy aprendiendo el lenguaje HTML.

Lo que necesito es colocar un menú desplegable que como primer item dice Propiedades(es el que el navegante visualizara cuando entre en la pagina). Al desplegarse el menú aparecen las siguientes opciones:

0.00 a 60.000
61.000 a 90.000
91.000 a 120.000
121.000 a 180.000
181.000 a 250.000
251.000 a 400.000
Mas de 400.000

Ahora bien lo que yo quiero es que cuando el navegante o usuario elija una de estas opciones, la misma lo envíe directamente a otra pagina dentro del mismo sitio. Hace casi 15 dias que busco en internet la forma de resolverlo y no encuentro el modo de hacerlo. Desde ya al que me pueda resolver dicho inconveniente muchísimas gracias.

  Respuesta:  Claudio
La otra forma de hacerlo, es con un <select> de HTML, algo como:

<SELECT Name=xx id=xx onChangue='cambiaCombo()'>
<option value='0.00 a 60.000'>0.00 a 60.000</option>
<option value='61.000 a 90.000'>61.000 a 90.000</option>
<option value='91.000 a 120.000'>91.000 a 120.000</option>
<option value='121.000 a 180.000'>121.000 a 180.000</option>
....
....
</select>

</html>
<script language=javascript>
function cambiaCombo()
{
alert(xx.value)
}
</script>

  Respuesta:  Oswaldo
Para que no te maltrates mucho te recomiendo que lo hagas por las herramientas de Internet en www.webreference.com/js/tools/menus

  Respuesta:  Jose Martinez Torres
Hola Fernando,

Bien... vayamos al tajo..! :)

Para hacer un menu desplegable lo primero que tienes que hacer es crear una capa para dicho menu. PUedes crearla de la siguiente manera:

<div id="Menu" style="visibility: visible; position: absolute; left: 310px; top: 205px; width: 304px; height: 76px; z-index: 4;">

Id = Nombre de la capa.
visibylity = estado visual puede ser visible o hidden (oculta, osea que no se vera)
position: Absolute o Relative. Pon Absolute.
left: XXXPx. esto es para colocar la capa donde quieras. es el numero de pixeles desde la izquierda.
Top: XXXpx. es para colorar la capa tambien empezando desde arriba.
width y height: sirven para darle un tamaño a esa capa.
z-index: o indice Z es para colocar la capa en posicion profunda. es decir una capa con z-index:3 se colacara por encima de una con z-index: 2

Es importante que coloques bien los espacios los dos puntos y los punto y coma, y que no repitas id iguales. De lo contrario tendras problemas.

Sigamos....(siento extenderme pero no se como explicartelo de otra manera).
en el div te montas el menu. Con tablas y demas... ejemplo:

<div id="Menu" style="visibility: visible; position: absolute; left: 310px; top: 205px; width: 304px; height: 76px; z-index: 4;">
<table width="310" height="76">
<tr>
<td><a href="">opcion1</a></td>
</tr>
<tr>
<td><a href="">opcion2</a></td>
</tr>
</table>
</div>
Es una explicacion sencilla, para no extenderme mucho. Si necesitas mas informacion puedes enviarme un mail.

Ta luego !!

Jose.