> Manuales > Taller de Javascript

Cómo hacer un sencillo navegador desplegable para una página web que funciona mediante una etiqueta SELECT de formulario. Podrás aprender a usar el objeto window del navegador y el evento onchange del select.

Navegador desplegable

Esta muy de moda incluir un navegador de un sitio web consistente en un campo desplegable de formulario o caja de selección (elemento <select>) donde, 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 podía ver un ejemplo de estos en la cabecera en uso en desarrolloweb en el momento de escribir este artículo. Este tipo de navegadores se usó mucho al comienzo de internet, ya que no existían mecanismos para hacer estos dinamismos con interfaces de usuario personalizadas y teníamos que usar elementos de formulario. Hoy no sería una práctica muy usada, ya que podemos usar interfaces con componentes avanzados para hacer de navegador, en vez de elementos <select> pero lo cierto es que didácticamente el ejercicio te podrá servir para aprender a trabajar con estos elementos de formulario y el objeto Window del navegador.

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

Vamos a ver a continuación cuáles son los pasos a realizar para construir el navegador desplegable.

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

Constará de la etiqueta <form> para abrir y cerrar el formulario. Le daremos un nombre a la etiqueta del formulario ("navegador") 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 Javascript

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>
function destino() {
  var 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.

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual