Navegador desplegable

  • Por
Para aprender en pocos pasos a crear un navegador formado por un menú desplegable. Al seleccionar una opción del menú iremos a una página distinta.
Esta muy de moda incluir un navegador de un sitio web consistente en un campo desplegable de formulario o caja de selección que, al seleccionar uno de sus elementos, que se corresponden con secciones del sitio, nos lleve a la sección que pretendemos visitar de manera automática.

Se puede ver un ejemplo de estos en la cabecera en uso en desarrolloweb en el momento de escribir este artículo. También se puede ver a continuación.

Este tipo de control posee varias ventajas, entre las que podemos destacar:

  • Ocupa poco espacio en la página
  • Se pueden poner tantas opciones como se desee
  • Es una herramienta muy visual y práctica
  • Es muy fácil de implementar
Pasos a realizar

Para conseguir un navegador así en nuestra página web debemos enfrentarnos a una tarea que se podría dividir en dos partes. Por un lado, debemos crear un formulario que contenga la caja de selección desplegable y por otro, un sencillo script que le de vida al recuadro, es decir, que prepare al recuadro para que el navegador se dirija a la página seleccionada. Vamos a ver por separado cada uno de estos elementos.

Formulario

Costará de la etiqueta <form> para abrir y cerrar el formulario. Le daremos un nombre ("navegador") al formulario para poder acceder a él más tarde usando Javascript.

Dentro del formulario colocaremos un único elemento: el campo de selección multiple desplegable. Daremos un nombre también al campo ("secciones") para poder acceder a el usando Javascript. Este campo contendrá las distintas opciones que queremos que se presenten en el menú desplegable. Éstas podrán ser secciones de tu web o también páginas que estén fuera del sitio.

Vamos a ver el código del formulario antes de continuar con la explicación:

<form name=navegador>
<select name="secciones">
<option value="no">Secciones y servicios de desarrolloweb
<option value="no">--------------------------------------
<option value="http://www.desarrolloweb.com/">Portada
<option value="http://www.desarrolloweb.com/reportajes/manuales.asp">Manuales
<option value="http://www.desarrolloweb.com/promocion">Promoci&oacute;n de p&aacute;ginas
<option value="http://www.desarrolloweb.com/programas">Programas
<option value="http://www.desarrolloweb.com/reportajes/ayudastecnicas.asp">Ayudas t&eacute;cnicas
<option value="http://www.desarrolloweb.com/noticias">Noticias
<option value="http://www.desarrolloweb.com/reportajes/cosecha2000.asp">Cosecha de 2000
<option value="http://www.desarrolloweb.com/favoritas">Favorita del mes
<option value="http://www.desarrolloweb.com/vuestraspaginas/">Vuestras p&aacute;ginas
<option value="http://www.desarrolloweb.com/colabora/">Colaborar
<option value="no">--------------------------------------
<option value="http://www.desarrolloweb.com/listacorreo/">Lista de correo de ayuda
<option value="http://www.desarrolloweb.com/mailnovedades.asp">Bolet&iacute;n de novedades
<option value="http://www.desarrolloweb.com/librovisitas/">Libro de visitas
</select>
</form>

Si te fijas, cada opción se corresponde con una de las secciones o servicios de desarrolloweb y está compuesta de dos partes importantes, la primera corresponde con el atributo value de la etiqueta <option>, que es igual a la URL absoluta de la página a la que nos queremos dirigir. La segunda parte destacable corresponde con el nombre que deseamos que se vea en la caja de selección.

Es también importante destacar que hemos incluido alguna opción que no queremos que nos direccione a ningún lugar. Son opciones para separar las secciones de los servicios o la opción primera, para indicar que este menu desplegable contiene las secciones y servicios de desarrolloweb. Las opciones que no queremos que nos lleven a otra página las hemos marcado con un "no" en su atributo value.

El script

Ahora vamos a ver cuál es el script que utilizamos para animar este menú desplegable. Es muy sencillo, lo podemos ver a continuación:

<script language=javascript>

function destino(){

url = document.navegador.secciones.options[document.navegador.secciones.selectedIndex].value

if (url != " no") window.location = url;

}

</script>

Básicamente es una función que recupera el value de la opción seleccionada en la caja de selección desplegable y lo almacena en una variable llamada url. Posteriormente, si la variable url no contiene la palabra "no", lleva al navegador a la posición seleccionada, es decir, al url que habíamos recogido. Recordar que si marcabamos el value de una opción a "no" es que no deseabamos qe el navegador viajase a otra dirección.

El evento OnChange

Esto no funcionaría si no vinculásemos el evento onchange de la caja de selección a la función destino que hemos visto hace un momento. El evento onchange se dispara cuando ha cambiado el valor seleccionado dentro del menú desplegable y debemos hacer que llame a la función destino. Para ello, en la etiqueta <select> debemos incluir el siguiente atributo onchange="destino()". La etiqueta quedaría así:

<select name="secciones" onchange="destino()">

Con todo esto junto ya tienes un bonito navegador desplegable y, esperamos, la capacidad para personalizarlo a tu gusto. Se puede ver también el ejemplo completo de este navegador.

Una cosa más. Si tu sitio tiene frames deberías hacer unos cambios al script para que todo funcione correctamente. Si es este tu caso, lee el reportaje cómo hacer una navegador desplegable cuando tu sitio tiene frames.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

hugo

20/3/2002
Hola buenos dias es para contaros que teneis un error en un ejemplo , es el ejemplo de Navegador desplegable , dentro de la opcion de poder ver el ejemplo dentro de onchanje en ejemplo completo de este navegador. en el codigo teneis el siguiente error en el onchange="destinoejemplo()"> y en la funcion la llamais a si function destino() con lo que los nombres no se corresponden y dan un error , gracias

Muchas gracias por tu ayuda!! Ya lo hemos actualizado.

Rene

21/11/2003
hola estoy utilizandfo este ejemplo, pero con url internos no del web si no direccionado a carpertas que estan en mi pc, y no funciona, me aparece la ubicacion correcta arriba pero no aparece el contenido, le tengo que dar actualizar para que aparezca...espero y me puedan ayudar...gracias

www.zharack.com

02/6/2005
Yo lo he probaod y funciona a la perfección.

Pero eso si, una recomendación. No hagais un copiar pegar!!!. Coger, Analizar y escribirlo vosotros: Os enterareis mejor y os servirá para el futuro!

Galdor

29/3/2007
NOTA: Habeis puesto un espacio en la comprobación del "no", es necesario eliminarlo puesto que en caso contrario todos los casos son diferentes a " no"

Abdiel2475

08/8/2007
bueno hola a mi me gustaria aser un navegador web pero no de asi como google si no un navegador como Firefox IE asi navegador como lo creari y todo eso se los agradeseria mucho se me dieran una guia gracias :)

Erzo

20/9/2007
Hola buenas, como sería implementando un botón ir para que saltará a cada página. Me parece que es la opción más extendida en menús.

Gracias,
Erzo

Alfonso

01/10/2007
Que macheteros, que falta de originalidad al tratar de crear un menu dinamico usando un objeto de tipo select, de verdad demasiado medicres

marta

23/10/2007
hola, y si en lugar de querer ir a una url distinta, lo que se pretende con las opciones del menú es mostrar y ocultar capas, se puede hacer?
lo que me ocurre es que sólo se puede añadir un comportamiento al menú completo, y no a los elementos por separado, por lo que no consigo que cada uno muestre una capa distinta.
gracias.

monik*

31/10/2008
solo denme 5 ejemplos de navegadores es todo lo que les pido

edgar

06/1/2009
El ejemplo me parece extraordinario, pero quisiera ver como puedo hacer que ese primer select al seleccionar una opcion dentro de la misma pagina me muestre en otro select opciones referentes a la opcion seleccionada del primer select. Ejemplo:primer select que apareca libros y en el segundo select me desglose ciertos titulos de libros.GRACIAS (ojala me puedan contestar).

Rigoberto

12/2/2010
Color
Existe alguna forma de cambiar el color o desarrollarlo con otro color, necesito este navegador para una pagina web en tono negro. Gracias

Micary

31/3/2011
Navegador
Buenas, quisiera hacerles una consulta yo quiero hacer una pagina de entrada donde se seleccione uno entre varios paises y haciendo clic en enviar me lleve a la pagina correspondiente al país, seria como este navegador pero en lugar de tener un menu desplegable quisiera hacerlo en una pequeña tabla, aca dejo una pagina modelo www.telmex.com ya que es esto exactamente lo que estoy buscando, si alguien puede ayudarme le estaria eternamente agradecida!!

Micary

31/3/2011
Navegador
Perdon, esta es la pagina modelo: http://www.telmex.com/mx/paises/pais.jsp

Jorge

20/6/2011
Menu con Formato
Hola, quisiera saber si a este tipo de Menu se le puede dar formato con CSS...Porque ya lo intenté aplicando clases a la etiqueta form, pero no me lo interpreta...

Muchas gracias

Maira Alejandra

06/7/2011
Navegador
Hola

Lo que necesito es que el menu me llame a paginas de mi pc no de internet si alguien me puede ayudar por favor...