Crear un menú desplegable

Septiembre 2017

A continuación veremos un script que te permitirá crear un menú desplegable.
Cuando el usuario seleccione un elemento de la lista, será redirigido a la dirección correspondiente.

Debes poner el siguiente código en el encabezado de tu página (entre <head> y </head>):

<script type="text/javascript">
window.onload = function() {
	formulario = document.getElementById('form_url');
	
	formulario.onsubmit = function() {
		if(this.elements[0].value != "") {
			document.location.href = this.elements[0].value;
		}
	};
	
	formulario.elements[0].onchange = function() {
		if(this.value != "") {
			document.location.href = this.value;
		}
	};
};
</script>


El siguiente script debes introducirlo en tu contenido, donde deseas ver la lista (este script ya esta completado con algunos ejemplos):

<form action="redireccion.php" metodo="post" id="form_url">
	<p>
		<label for="url">Menu :</label>
		<select name="url" id="url">
			<option value="">Seleccione:</option>
			<option value="index.html">Home</option>
			<option value="news.html">News</option>
			<option value="contact.html">Contacte con nosotros</option>
		</select>
		<input type="submit" value="Ok" />
	</p>
</form>


Este script es muy simple de adaptar, y rápidamente deberías entender el principio.

Para no dejar de lado a los que no tienen activado Javascript (aunque son muy raros), puedes crear una página llamada “redirección.php” conteniendo:

<?php
header('Location: '.urldecode($_GET['url']));
?>

Consulta también

Publicado por Carlos-vialfa. Última actualización: 30 de diciembre de 2009 a las 22:29 por Carlos-vialfa.
El documento «Crear un menú desplegable» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.