Navegación con menús desplegables

Una buena manera de ahorrar espacio en nuestras páginas es usando menús desplegables en lugar de interminables listas de enlaces.

En qué consiste

Lo que queremos es incorporar a nuestras páginas menús de este tipo:

De este modo podemos incluir innumerables enlaces en un muy pequeño espacio, ahorrándonos esas listas de enlaces que parecen la lista de la compra de una familia numerosa. En contra de estos menús se puede alegar que no resultan muy vistosos que digamos.

Cómo realizarlo

Para realizar este truco necesitaremos crear la lista desplegable, colocando como parámetro VALUE la dirección de la página web e incluyendo un evento onChange (que se ejecuta cuando el usuario cambia la opción escogida en la lista) que llamará a una función que definiremos más adelante:

<FORM name="formulario">
  <SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
    <OPTION VALUE="">Visitar
    <OPTION VALUE="http://www.ole.es">¡Olé!
    <OPTION VALUE="http://www.ozu.es">Ozú
    ...
  </SELECT>
</FORM>

La función irA recibe como parámetro this, que es una referencia al objeto actual, en este caso la lista. El código de dicha función será el siguente:

function irA(menu){
  window.location.href = menu.options[menu.selectedIndex].value;
}

Esta función cambia la dirección de la página actual por el valor de la opción (menu.options[...].value) que el usuario ha escogido (menu.selectedIndex).

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

HAY 47 COMENTARIOS
  • cualquiera dijo:

    Esto e demasiado simple ,NO?

  • Zuly dijo:

    Sencillo, pero MUY UTIL :-) Una gran idea.

  • drag star dijo:

    Cojonudo, despues de mirar cientos de manuales, tutoriales, ayudas, de probar miles de formas al fin doy con ella. ¡¡GRACIAS!! Mi jefe te lo agradecerá.

  • Daniel Pérez dijo:

    Me gustaría saber, una vez llegado a este paso, como puedo combinar dos menús desplegables, es decir, seleccionar una opción del primero, despues una del segundo y por ultimo pulsar el botón e ir a la página con la combinación elegida. Muchas gracias.

  • Albert dijo:

    Estube probando durante mucho tiempo , intentando encontrar un menu sencillo ..pero a la vez efectivo.. ,encontre esta pagina que enseñaba a hacer este "menu desplegable" y me fue genial.. muy bueno gracias.. estas paginas son las que valen la pena en internet e ayudan a los webmasters a que contruyan sus paginas!! un saludo..

  • Dnis dijo:

    Agradecido por esta información PERO más aún estaría si consiguera el enlace más acertado, ensañe y no me resultó.Busco lo siguiente: Seleccionar, por ejemplo una ciudad y al hacer el click me salgan las características que están en otra página. Si me respondes pronto te lo agradecería!!! Repito, no me funcionó con la función IrA. Hasta pronto!!!

  • Anallancy dijo:

    Esta muy bueno tu menu, pero yo quiero un codigo el cual me permita crear un layer y que ese layer le pueda asignar eventos, pero lo que quiero con ese layer es asignarle cierta cantidad de texto, Esto lo quiero para poner una cantidad de x preguntas y cuando la persona le de click en la pregunta le aparezca el texto. Te lo ruego si puedes hacerlo, por favor notificamelo Te lo agradeceré

  • Gustavo dijo:

    Quiero saber, como puedo poner un html. que diga que lo otros no me puedan copiar mis cosas de la web, cuando apreten el click derecho, por fa...

  • qq dijo:

    aasdd

  • santiago dijo:

    hola, llevo revisando toda la tarde y parte de la noche y no lo encuentro, el realizar un menu desplegable con base a un formulario lo tiene todo el mundo, compartiras mi opinion de que no es nada bonito y no se integra en muchos sitios, lo que te pido por favor es que me mandes en codigo para crear un menu desplegable de texto, para que me entiendas, al estilo de los de las paginas de microsoft, te lo agradeceria enormemente, me encuentro con la necesidad para no sobrecargar mi web muchas gracias y seguid asi, vuestro sitio es estupendo

  • Raul dijo:

    He probado el código y es justo lo que quiero pero quiero que me lo abra en otra página, como puedo hacerlo? Gracias, un saludo

  • FLyCaT dijo:

    Alguien me puede decir como crear un menú de estos desplegables que si, por ejemplo, si pinchas en aficion... se te despliegue un submenú con foro, fotos, etc... a lo explorador de windows o algo parecido? espero respuesta. gracias.

  • Isaac mendoza dijo:

    Quisiera saber como puedo implementar, la opcion para regresar a la pagina o lugar previemente visitado. Es decir algo similar a la barra Atras Adelante pero en la pagina

  • Isaac mendoza dijo:

    Quisiera saber como puedo implementar, la opcion para regresar a la pagina o lugar previemente visitado. Es decir algo similar a la barra Atras Adelante pero en la pagina

  • jorge villanueva dijo:

    muy bueno el tutorial, solo quisiera saber como poder cambiar el color blanco que es el color que se ve, y si se puede hacer el menu con letras mas chicas, saludos !

  • conan dijo:

    El menu es muy sencillo, lo cual lo hace muy practico, pero me gustaria saber como se cambia el color de la fuente, del fondo y de la fechita, ademas querria que la nueva pagina se abriria en un marco y no como una nueva pagina, saludos a todos

  • Mar dijo:

    Necesito ayuda ya he implementado la lista en un pagina con frames, solo que al activarla quiero que la liga se vaya a otro frame y no la activo. alguien me puede decir como le hago

  • Mar dijo:

    Necesito ayuda ya he implementado la lista en un pagina con frames, solo que al activarla quiero que la liga se vaya a otro frame y no al activo. alguien me puede decir como le hago

  • gisela dijo:

    hola, llevo revisando toda la tarde y parte de la noche y no lo encuentro, el realizar un menu desplegable con base a un formulario lo tiene todo el mundo, compartiras mi opinion de que no es nada bonito y no se integra en muchos sitios, lo que te pido por favor es que me mandes en codigo para crear un menu desplegable de texto, para que me entiendas, al estilo de los de las paginas de microsoft, te lo agradeceria enormemente, me encuentro con la necesidad para no sobrecargar mi web muchas gracias y seguid asi, vuestro sitio es estupendo

  • gisela dijo:

    si me sirvio tu respuesta pero quisiera un menu como este http://www.globaltrust.cl/valores_al_dia.htm es decir con diseño gracias

  • FR[an]KY-[DR] dijo:

    quiero que cuando en el menu elijo un opcion, esta no vaya a otra pagina, sino que se situe en alguna palabra especifica dentro de la misma pagina en la que esta puesto el menu. Algo asi como un ANCLA de HTML, desde el menu en java Si me podes mandar la respuesta al mail que puse arriba te lo agradeceria un toco!!! ... desde ya GRACIAS

  • jlfdez dijo:

    Tengo un menu desplegable exactamente igual a este pero necesitaría un menu que al hacer la elección se abriera en otra ventana diferente. Alguien sabría como hacer esto. Muchas gracias de antemano

  • pep dijo:

    donde meto la funcion irA? ya que me lo trata como a texto si lo copio igual que en el ejemplo

  • Diego dijo:

    Hola, muy buena su pagina, quisisera hacerles una consulta: Necesito hacer un menu de 7 secciones, y dentro de esas secciones hay sub-secciones, lo que necesito es un menu que al pasar con el mouse por encima de una de las opciones se despliegue y se vean las respectivas sub-secciones ¿Cómo puedo hacerlo? Saludos

  • Damian dijo:

    Me gustaria que mi menu tuviera una lista de nombres de archivos de sonidos y que al dar click en uno se reprodujera dentro de la pagina

  • Ernesto dijo:

    Hola!!, Tengo una tabla llamada MENU en mysql, la cual contiene información de páginas en internet + el link, como aplico el menu desplegable consultando esta tabla y al elegir una opcion me lleve a la página que quiero ?

  • Clemente E. Pichardo dijo:

    Saludos, tengo una pregunte , llevo varios dias tratando de conseguir como hacerle para un menu en php , que por ejemplo el menu tiene varios temas puede ser una tabla , pero cada de la tabla tiene un color igual , ecepto el que indica el de la pagina actual , claro esto es usando frames , pero a lo que me refiero es como puedo mandar ese dato a una variable para comparar con ondiciones , si se pulso cambia de color el que se pulso , espero que se entienda... por si acaso estoy trabajando en windows , no c si teiene algo que ver . pero me han dicho que declarando en un Has click aqui entonces esto se guarda como : $dato=$_GET["nombre"]; y esyo me guarda en dato=>var supuestamente... pero no me da resultado... ATTE. Clemente E. Pichardo

  • Clemente E. Pichardo dijo:

    Saludos, tengo una pregunte , llevo varios dias tratando de conseguir como hacerle para un menu en php , que por ejemplo el menu tiene varios temas puede ser una tabla , pero cada de la tabla tiene un color igual , ecepto el que indica el de la pagina actual , claro esto es usando frames , pero a lo que me refiero es como puedo mandar ese dato a una variable para comparar con ondiciones , si se pulso cambia de color el que se pulso , espero que se entienda... por si acaso estoy trabajando en windows , no c si teiene algo que ver . pero me han dicho que declarando en un Has click aqui entonces esto se guarda como : $dato=$_GET["nombre"]; y esyo me guarda en dato=>var supuestamente... pero no me da resultado... ATTE. Clemente E. Pichardo

  • Clemente E. Pichardo dijo:

    Saludos, tengo una pregunte , llevo varios dias tratando de conseguir como hacerle para un menu en php , que por ejemplo el menu tiene varios temas puede ser una tabla , pero cada td de la tabla tiene un color igual , ecepto el que indica el de la pagina actual , claro esto es usando frames , pero a lo que me refiero es como puedo mandar ese dato a una variable para comparar con ondiciones , si se pulso cambia de color el que se pulso , espero que se entienda... por si acaso estoy trabajando en windows , no c si teiene algo que ver . pero me han dicho que declarando en un a herf="dir.ext" ?nombre="var">Has click aqui a entonces esto se guarda como : $dato=$_GET["nombre"]; y esyo me guarda en dato=>var supuestamente... pero no me da resultado... ATTE. Clemente E. Pichardo

  • Alexander Pereira dijo:

    Tengo un motor de busqueda en mi site, cuando coloco una palabra para realizar la busqueda ella funciona y supongo que crea un archivo temporal o algo por el estilo donde muestra los enlaces que encontró, cuando selecciono ir atras, no me regresa a la página anterior y el navegador no encuentra la página, quisiera saber si alguine me puede ayudar a encontrar la solución ya que el código javascript que aparece en todos lados no funciona.

  • Abigail Hernandez dijo:

    Quiero saber como le hago para que los elementos de mi menú desplegable sean el resultado de un consulta

  • m0ns73r dijo:

    tengo dos menus deplegables, en uno tengo una serie de opciones. en el otro tengo tambien una serie de opciones, pero quiero que cambie dependiendo de la opcion que seleccione en el primer menu desplegable. mi pregunta es como hago eso. cualquier respuesta envienmela a [email protected]

  • any dijo:

    bueno gracias por publicar trucos como estos debiso a que es muy dificil encontrar este tipo de cosas pero yo tengo una duda; como programo un menu desplegable y que el valor que se seleccione se almacenne en un campo de una base de datos de mysql. gracias

  • Diana E dijo:

    Hola, necesito saber como hago para utilizar menus desplegables dentro de un frame, pues estoy haciendo dos frames en el 1 tengo mi menú horizontal desplegable y en el de abaja las páginas q se deben ver según lo seleccionado en el menú, estoy intentando mirara tambien con iframes, pero no se como decirle al iframe 2 q se actualize según lo seleccionado en el menú, Si alguien tiene otra sugerencia o me puede enviar un ejemplo lo agradeceria, por favor enviarlo a [email protected], GRACIAS

  • Diana E dijo:

    Hola, necesito saber como hago para utilizar menus desplegables dentro de un frame, pues estoy haciendo dos frames en el 1 tengo mi menú horizontal desplegable y en el de abaja las páginas q se deben ver según lo seleccionado en el menú, estoy intentando mirara tambien con iframes, pero no se como decirle al iframe 2 q se actualize según lo seleccionado en el menú, Si alguien tiene otra sugerencia o me puede enviar un ejemplo lo agradeceria, por favor enviarlo a [email protected], GRACIAS

  • kaiser dijo:

    Mi duda es como hacer un menu desplegable en php, pero que los datos que contiene el menu los obtengamos de una tabla de una bases de datos.

  • Adrian dijo:

    Mi duda es como hacer un menu desplegable en phpy mysql, pero que los datos que contiene el menu los obtengamos de una tabla de una bases de datos.

  • HUM83R70 dijo:

    La verdad no se si este en lo correcto, pero para poder crear un menú desplegable con elementos tomados de una base de datos, ¿se podrían concatenar los resultados de una consulta con las etiquetas +nombre_dato_consulta??? Aclaro que la sintaxis no es correcta, solo es para ejemplificar...

  • HUM83R70 dijo:

    disculpen pero no escribió completa mi idea mi idea es concatenar la etiqueta option value=dato_consulta seguida por nombre_dato_consulta donde dato_consulta sería una url o algún dato que se necesita y nombre_dato_consulta el nombre del dato que aparecerá en el menú. ¿¿¿entonces se podría hacer???

  • Daniel dijo:

    ¿en qué parte del código html se debe colocar la función irA?

  • LILI dijo:

    MIRE QUIERO UTILIZAR UN MENU DESPLEGABLE PERO NO QUIERO QUE ME ENVIE HACIA OTRA PAGINA LO QUE NECESITO ES QUE AL SELECCIONAR ESA OPTION Y UTILIZANDO UN BOTON ME GUARDE LOS DATOS EN UNA TABLA. BUENO ESTOY UTILIZANDO MYSQL Y PHP. NO SE COMO HACERLE

  • Paola dijo:

    Me gustaria saber cual es la funcion o propiedad, o si necesito un javascript para una lista desplegable (combobox), donde en la parte visual pueda ingresar otro item o registro, pero no utilizando codigo, si no que en el momento que yo ingrese un dato en la lista desplegable me lo inserte a una base de dato... NECESITO AYUDA POR FAVOR!!

  • Itxaso dijo:

    ¡Hola! Quiero hacer un menú desplegable en el que según voy escribiendo un texto límite las opciones del desplegable a las que coinciden con el texto escrito. Por ejemplo: si quiero seleccionar una provincia del desplegable, en vez de desplegar el menú y seleccionar, quiero escribir las inicias "AL" y que las opciones del desplegable se limiten a las que empiezan por "AL": "ALAVA, ALICANTE, ALMERIA,..." Muchas gracias,

  • ady dijo:

    hola les agradeceria mucho si alguien m dijera como incertar una lista desplegable al pasar el puntero xfavor, muchas gracias =)

  • Pablo dijo:

    Hola a todos. Lo que necesito es que cuando yo seleecione un elemento de una lista desplegable me muestre en una caja de texto el valor de dicho elemento seleccionado. de antemano muchas gracias.

  • jhonattan dijo:

    hola necesito que cuando se selecione un menu deplegable el valor de este elemento se ponga en un cuadro de texto

  • Andrés dijo:

    Hola. Pregunta. Si quisiera limitar la cantidad de items a mostrar. Poe ej. a 10, es posible ?

Conéctate o Regístrate para dejar tu comentario.