Menú desplegable con un formulario Select

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ú

1. Descripción

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.

2. Ejemplo

--- Universitat de Barcelona Universitat Politécnica de Catalunya Universitat Autónoma de Barcelona Universitat Pompeu Fabra

3. Código para copiar y pegar

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>

1. Copiar y copiar el código HTML para colocarlo en el lugar donde desee que aparezca el menú desplegable
2. Copiar y pegar el código javascript par colocarlo en cualquier sitio de la página HTML, preferiblemente entre las etiquetas </title> y </head>
3. Sustituir xxxx.htm, yyyy.htm y zzzz.htm por direcciones de Internet del tipo http://www.upf.es o por nombres de ficheros HTML locales
4. Sustituir texto 1, texto 2 y texto 3 por el texto que aparecerá en el menú

Para añadir otra opción, será necesario situar en el formulario del código HTML otra línea del tipo:
<option value="tttt.htm">texto 4

4. Análisis

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

5. Recomendaciones de uso

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.

6. Sedes Web que lo aplican

	http://www.vilaweb.com
	Portal - Diario electrónico VilaWeb.

	http://www.bcn.es
	Sede corporativa del Ayuntamiento de Barcelona

7. Versión avanzada

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>

7.2. Instrucciones

1. Copiar y copiar el código de la versión avanzada para colocarlo en el lugar donde desee que aparezca el menú desplegable (substituye al código HTML de la versión básica)
2. Copiar y pegar el código javascript de la versión básica para colocarlo en cualquier sitio de la página HTML, preferiblemente entre las etiquetas </title> y </head>.
3. Sustituir xxxx.htm, yyyy.htm y zzzz.htm por nombres de ficheros HTML locales
4. Sustituir texto 1, texto 2 y texto 3 por el texto que aparecerá en el menú

Para añadir otra opción, será necesario añadir, justo antes de la línea con la instrucción select, tres líneas como las siguientes:
temp += '<option value="tttt.htm">'
temp += (document.URL.indexOf("tttt.htm")!=-1)?' selected':''
temp += 'texto 4'