Navegador desplegable javascript

Your ads will be inserted here by
Easy Plugin for AdSense.
Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.
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. Este tipo de control posee varias ventajas, entre las que podemos destacar:
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.
Costará de la etiqueta 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 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.
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: Your ads will be inserted here by Easy Plugin for AdSense. Please go to the plugin admin page to
function destino(){ url = document.navegador.secciones.options[document.navegador.secciones.selectedIndex].value if (url != " no") window.location = url; } 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.
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 Con todo esto junto ya tienes un bonito navegador desplegable y, esperamos, la capacidad para personalizarlo a tu gusto. |