Un solo menú para toda la Web

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ú

1. Descripción

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.

2. Ejemplos

Ejemplo de menu contextual horizontal
Ejemplo de menu contextual vertical

3. Código para copiar y pegar

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>

4. Instalación

1. Crear un fichero llamado "codigo_mimenu.js" con el primer fragamento de código javascript
2. Editar este primer fragmento de código con el nombre y la dirección (nombre del fichero HTML) de cada una de las páginas que formaran el menú. Por ejemplo:
   
   //Texto de la primera opción
   var textoOpcion1 = 'inicio'
   //Dirección de la segunda opción
   var direccionOpcion1 = 'index.htm'
   
   El código está preparado para poner hasta 10 opciones en el menú. No obstante, si es ncesario, se pueden poner hasta 100. En este cas, a partir de la opción 11 habrá que añadir nuevas variables de la siguiente forma:
   
   var textoOpcion11 = ''
   var direccionOpcion11 = ''
   
   Por otro lado, las siguientes variables permiten indicar que código HTML ira antes del menú, que código entre las opciones del menú y que código despues del menú. Normalmente en la variable "alIncio" se colocará la etiqueta del tipo fuente y quizá una etiqueta "center", la variable enMedio permite poner un carácter de separación entre las opciones del menú o generar un menú vertical al poner una etiqueta <br>. La variable "alFinal" sirve para poner el código que aparecerá después del menú. Esta variable se suele usar para cerrar las etiquetas que se han colocado en "alInicio". Por ejemplo, para un menú horizontal estas variables serian:
   
   var alIncio = '<font face="verdana" size="1"><center>'
   var enMedio = ' | '
   var alFinal = '</font></center>'
   
   Y para un menú vertical
   
   var alIncio = '<font face="verdana" size="1">'
   var enMedio = '<br>'
   var alFinal = '</font>'
3. Situar el fichero "codigo_mimenu.js" en la misma carpeta de las páginas HTML de la sede Web
4. Situar el segundo fragmento de códido javscript en todas las páginas donde queramos poner el menú, el cual aparecerá justo en el sitio donde quede colocado este código.

5. Análisis

6. Recomendaciones de uso

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".