Autor: Cristòfol Rovira (Universitat Pompeu Fabra)
Citación recomendada: Cristòfol Rovira. Menú desplegable con un formulario Select [en linea]. "Hipertext.net", núm. 1, 2003. <http://www.hipertext.net>
1. Descripción
2. Ejemplo
3. Código para copiar y pegar
4. Análisis
5. Recomendaciones de uso
6. Sedes Web que lo aplican
7. Versión avanzada
7.1. Código para copiar y pegar
7.2. Instrucciones
En este apartado se presentan ejemplos de elementos para diseño de navegación con el objetivo que formen parte del sistema de navegación de una sede Web.
menú select · un solo menú
Este elemento de navegación consiste en un formulario HTML estándar de tipo Select en el cual cada opción tiene un enlace asociado que se activa al seleccionarla.
Código HTML
<form>
<select name="ad" onchange="salta(this.form)">
<option selected> ---
<option value="xxxx.htm">texto 1
<option value="yyyy.htm">texto 2
<option value="zzzz.htm">texto 3
</select>
</form>
Código javascript
<SCRIPT LANGUAGE="JavaScript">
function salta(Sel){
if (Sel.ad.selectedIndex != 0){
document.location=Sel.ad.options[Sel.ad.selectedIndex].value
}}
</SCRIPT>
Ventajas | Inconvenientes |
Ocupa poco espacio que no aumenta verticalmente al añadir más opciones, aunque si puede aumentar horizontalmente en función de la opción con el texto más largo | Es necesario desplegar el menú, despues de hacer un clic, para ver todas las opciones disponibles |
Facilidad de manejo. Su funcionamiento es conocido porque es un elemento HTML estádard | No hay visializaciones parciales del menú porque cuando se desplega lo hace en su totalidad |
En la versión avanzada, es un menú con información contextual porque indica al usuario en que página se encuentra | Dificultad en representar la estructura jerárquica |
Este tipo de menú es adecuado para cumplir un función complementaria en el diseño de navegación de una sede Web, aportando enlaces directos a secciones de la sede Web de especial importancia o para una selección de enlaces exernos. No se recomienda su utilización como menú básico de navegación porque es necesario desplegar el menú para ver todas sus opciones.
http://www.vilaweb.com |
Portal - Diario electrónico VilaWeb. |
http://www.bcn.es |
Sede corporativa del Ayuntamiento de Barcelona |
Cuando este menú aparece en todas las páginas de una sede Web para la navegación local, se puede mejorar con esta versión avanzada que añade sensibilidad al contexto. Esto significa que la opción que corresponde a la página activa quedará seleccionada en el menú, informando al navegante de la página en la cual se encuentra situado.
7.1. Código para copiar y pegar
<SCRIPT LANGUAGE="JavaScript">
var temp = ''
temp += '<form><select name="ad" onchange="salta(this.form)">'
temp += '<option selected> ---'
temp += '<option value="xxxx.htm"'
temp += (document.URL.indexOf("xxxx.htm")!=-1)?' selected':''
temp += '>texto 1'
temp += '<option value="yyyy.htm">'
temp += (document.URL.indexOf("yyyy.htm")!=-1)?' selected':''
temp += 'texto 2'
temp += '<option value="zzzz.htm">'
temp += (document.URL.indexOf("zzzz.htm")!=-1)?' selected':''
temp += 'texto 3'
temp += '</select></form>'
document.write(temp)
</SCRIPT>