Autor: Cristòfol Rovira (Universitat Pompeu Fabra)
Citación recomendada: Cristòfol Rovira. Un solo menú para toda la Web [en linea]. "Hipertext.net", núm. 1, 2003. <http://www.hipertext.net>
1. Descripción
2. Ejemplos
3. Código para copiar y pegar
4. Instalación
5. Análisis
6. Recomendaciones de uso
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 menú o barra de navegación generado por código javascript que aparecerá en todas las páginas de una sede Web. El código del guión javascript está contenido en un solo fichero independiente. Por tanto, es muy facil modificar o ampliar el menú porque editando solo este fichero del código javascript se modifica el menú que aparece en todas las páginas de la sede Web. Además, el menú da información de contexto porque la opción de la página activa aparece sin enlace, indicando al lector donde se encuentra situado.
Ejemplo de menu contextual horizontal
Ejemplo de menu contextual vertical
Fragmento de código 1
Hay que crear un fichero llamado "codigo_mimenu.js" con el siguiente código. Este fichero deberá colocarse en la misma carpeta de las páginas HTML de la sede Web.
//Código creado por Cristòfol Rovira
//Disponible en http://www.hipertext.net
//Puede usarse libremente indicando su autor
function mimenu(){
//Inicio de la zona de edición de variables
//Código HTML antes del menú
var alIncio = ''
//Código HTML en medio de las opciones del menú
var enMedio = ' | '
//Código HTML después del menú
var alFinal = ''
//Opciones del menú
//Texto de la primera opción
var textoOpcion1 = ''
//Dirección de la segunda opción
var direccionOpcion1 = ''
//Texto de la segunda opción
var textoOpcion2 = ''
//Dirección de la segunda opción
var direccionOpcion2 = ''
//Texto de la tercera opción
var textoOpcion3 = ''
//Dirección de la tercera opción
var direccionOpcion3 = ''
//Texto de la cuarta opción
var textoOpcion4 = ''
//Dirección de la cuarta opción
var direccionOpcion4 = ''
//Texto de la quinta opción
var textoOpcion5 = ''
//Dirección de la quinta opción
var direccionOpcion5 = ''
//Texto de la sexta opción
var textoOpcion6 = ''
//Dirección de la sexta opción
var direccionOpcion6 = ''
//Texto de la séptima opción
var textoOpcion7 = ''
//Dirección de la séptima opción
var direccionOpcion7 = ''
//Texto de la octava opción
var textoOpcion8 = ''
//Dirección de la octava opción
var direccionOpcion8 = ''
//Texto de la novena opción
var textoOpcion9 = ''
//Dirección de la novena opción
var direccionOpcion9 = ''
//Texto de la décima opción
var textoOpcion10 = ''
//Dirección de la décima opción
var direccionOpcion10 = ''
//Final de la zona de edición de variables
//No modificar a partir de este punto
var variablesOk = false
var objException
var opciones = new Array()
var k=0
for (i=1; i<101; i++){
try {
textoOpcionActiva = eval('textoOpcion'+i)
direccionOpcionActiva = eval('direccionOpcion'+i)
variablesOk = true
} catch (objException){}
if ((variablesOk)&&(textoOpcionActiva!='')&&(direccionOpcionActiva!='')){
opciones[k] = textoOpcionActiva
k++
opciones[k] = direccionOpcionActiva
k++
}
}
document.write(menuContextual(alIncio, enMedio, alFinal, opciones))
}
function menuContextual(){
var argArray = menuContextual.arguments
var argNombre = menuContextual.arguments.length
var inici = (argNombre > 0) ? argArray[0] : '';
var separacio = (argNombre > 1) ? argArray[1] : '';
var finalitzacio = (argNombre > 2) ? argArray[2] : '';
arrayOpcions = (argNombre > 3) ? argArray[3] : '';
var temp = inici;
var i = 0;
while (i<arrayOpcions.length) {
if (i+1<arrayOpcions.length){
temp += (document.location.href.indexOf(arrayOpcions[i+1])!=-1)? arrayOpcions[i]
: '<a href="' + arrayOpcions[i+1] + '">' + arrayOpcions[i] + '</a>';
if (i+2<arrayOpcions.length){temp += separacio};
}
i = i+2;
}
temp += finalitzacio;
return temp;
}
Fragmento de código 2
Hay que colocar este código en cada una de las páginas HTML de la sede Web. El menú aparecerá justo donde quede situado el código.
<script language="javascript" src="codigo_mimenu.js"></script>
<script language="javascript">mimenu()</script>
Ventajas | Inconvenientes |
Hay un solo menú para toda la sede Web. Por tanto, para hacer modificaciones o ampliaciones solo será necesario modificar el código del fichero "codigo_mimenu.js" | La programación javascript no perdona. Cualquier pequeño error en la edición del código impedirá que el menú sea generado. |
Es un menú contextual. La opción del menú de la página activa aparece sin enlace, indicando al lector donde se encuentra situado. | A diferencia de los menús soportados con frames, este menú no permance visible de forma permanente, sino que desaparece al desplazar la página hacia abajo. |
Funciona con Internet explorer 5.0 ó superior y Netscape Navigator 7.0 ó superior |
Usar este código para generar el menú principal de la sede Web. Se puede optar por un menú horizontal en la parte superior o en la inferior (o en ambas) o por un menú vertical, a la izquierda de las páginas, colcando un <br> en la variable "enMedio".