espaciador Tutorial gratuito online en castellanoEstás en: HTML» Trucos » Menú desplegable

Trucos y preguntas frecuentes sobre diseño en HTML

¿Cómo se puede hacer un menú desplegable que sirva de menú de navegación?

Se puede conseguir un menú de navegación sin necesidad de usar JavaScript utilizando un campo de formulario despegable y un botón que confirme la selección. Este método puede parecer muy simple, pero en muchos casos nos será útil por cuestión de espacio. El efecto final sería el siguiente:

Para crear un menú de este tipo lo primero que tenemos que hacer es insertar un formulario, utilizando la etiqueta <form></form>, en el lugar de nuestro documento donde queramos que aparezca el menú. A continuación, añadiremos, dentro de la etiqueta de formulario, la etiqueta que indica campo de formulario desplegable:

<select name="menu"></select>

Quedará así:

<form>
<select name="menu"></select>
</form>

Lo siguiente es añadir los valores que aparecerán dentro del menú desplegable. Para ello utilizaremos la etiqueta <option>...</option> dentro de la etiqueta <select name="menu"></select>, con los valores que deseemos incluír en nuestro menú. Dentro del parámetro value, deberemos incluír las rutas o URLs donde queramos acceder. Para nuestro ejemplo sería lo siguiente:

<form>
<select name="menu">
<option>---- M E N U ----</option>
<option value="http://distritoweb.net" >Inicio</option>
<option value="http://distritoweb.net">Tutoriales</option>
<option value="http://distritoweb.net">Herramientas</option>
<option value="http://distritoweb.net">Utilidades</option>
<option value="http://distritoweb.net">FAQs</option>
</select>
</form>

Ahora hay que añadir el botón que activará las opciones del menú. Para ello utilizaremos la etiqueta <input>. En el parámetro value, escribiremos la palabra que queramos que aparezca en el botón, en nuestro caso es "IR". Además tendremos que añadir lo siguiente para que el botón funcione:

onClick="location=this.form.menu.value"

Quedando lo siguiente:

<input type="button" value="IR" name="button" onClick="location=this.form.menu.value"/>

Y este sería el resultado final:

En el editor de textos En el navegador
<form>
<select name="menu">
<option>---- M E N U ----</option>
<option value="http://distritoweb.net" >Inicio</option>
<option value="http://distritoweb.net">Tutoriales</option>
<option value="http://distritoweb.net">Herramientas</option>
<option value="http://distritoweb.net">Utilidades</option>
<option value="http://distritoweb.net">FAQs</option>
</select>
<input type="button" value="IR" name="button" onClick="location=this.form.menu.value"/>
</form>
logo distrito web


powered by FreeFind