sou a inici > el taller > Creació de menús de navegació

Creació de menús de navegació

En aquest document s'explica com implementar un menú configurable en JavaScript, facilitant tant la navegabilitat com la programació d'un lloc. Es donen els passos a seguir i finalment s'esmenten una sèrie de millores possibles.

1. Introducció

Quan dissenyem un lloc que està composat per diverses pàgines és normal fer que aquestes pàgines estiguin lligades entre elles per enllaços, o bé que hi hagi un petit índex o menú que volem que es repeteixi en cada pàgina per facilitar la navegació; això, però, complica la gestió del lloc, donat que cada vegada que s'actualitzi el lloc, s'afegeixi una pàgin o es varii el menú, implica que s'han de repassar totes les pàgines per modificar el menu...
Això es pot resoldre des de la banda del servidor amb la generació dinàmica de les pàgines, però complica molt més la programació del lloc. És més fàcil fer-ho amb JavaScript des de la banda del client, no es perd cap tipus de funcionalitat (configurabilitat, facilitat de manteniment, etc...) i fins i tot descarreguem el servidor de tasques poc crítiques.

2. Funció bàsica

Els passos a seguir són els següents:

Definir les parelles pàgina/títol que han d'anar al menu (les opcions del menu).

Codificar totes aquestes opcions dins d'una matriu bidimensional, on cada línia inclou una opció de menú (una parella pàgina/títol):

navURL[] = new Array;
navURL[0] = new Array('inicial.html','Inicial');
navURL[1] = new Array('primera.html','Primera Pàgina');
navURL[2] = new Array('segona.html','Segona Pàgina');
navURL[4] = new Array('tercera.html','Tercera Pàgina');

Definir la funció que insertarà tots els elements de la matriu a la pàgina HTML. Aquesta funció pot tenir en compte (com a l'exemple, en quina pàgina estem, fent que aquest enllaç o bé no surti o bé es mostri diferent:
```
function navURL(index) {
  for (var i in navURL) {
    if (i != index) {
      document.writeln('<a href="' + navURL[i][0] + '">' +
        navURL[i][1] + '</a>');
    } else {
      document.writeln(navURL[i][1]);
    }
  }
}
```
Encapsularem aquesta funció i els arrays dins d'un fitxer de funcions exterior a la pàgina (per exemple, menu.js). Després s'haurà d'incloure una referència a aquest fitxer a cada una de les pàgines del nostre lloc.
A la crida que es faci a la funció a qualsevol punt de la pàgina, s'haurà d'incloure el número de l'element de l'índex que volem que es comporti de manera diferent de la resta del menu. La crida seria similar a aquesta:
```
menu(3);
```
on 3 correspòn al número de l'índex de l'element de la matriu referent a la pàgina des d'on fem la crida...

La funció d'exemple s'ha simplificat molt per què sigui fàcil d'entendre, però es pot complicar el codi HTML que s'imprimeix a la pàgina tant com es vulgui, incloent, per exemple taules amb colors o imatges amb un disseny més acurat. Per exemple, es pdoría fer que cada un dels enllaços estigui dins d'una línia distina, com en un menu convencional, o bé fer que tots els enllaços estiguin dins d'una sola línia, per fer una barra de navegació.
També es pot fer que les referències no siguin només a documents HTML, sino també amb la URL 'javascript:', de manera que això ens permeti executar qualsevol funció JavaScript que haguem provat per donar més dinamisme a la pàgina.

3. Millores

Com un dels principals inconvenients hi ha el que s'ha de conèixer a quin índex corespòn cada pàgina, es pot variar la funció de manera que allò que es passi per paràmetre no sigui un número d'índex , sino la pròpia adreça (o part de la de la pàgina). Veiem com podria fer-se.

La crida a la funció seria:

<script language="JavaScript">
  <!--
  menu();
  //-->
</script>

i la funció quedaria com:

function menu() {
  for (var i in navURL) {
    if (location.href.indexOf(menu[i][0]) != -1) {
      document.writeln("<a href=\""+menu[i][0]+"\">"+
        menu[i][1]+"</a>");
    }
  }
}

Una altra millora es el fet d'incloure subopcions o submenus dintre de cada una de les opcions del menu. Imaginem, per exemple, que tenim un lloc amb unes quantes pàgines des de quines es pot accedir, al seu torn, a d'altres (una mena d'estructura d'arbre...) Amb el tipus de menu dissenyat fins ara, o posem només les pàgines principals (perdem navegabilitat) o les posem totes al mateix nivell (amb el que no reflexem l'estructura del lloc i el menu creix exageradament).

Com incloure aquests menus? Podem afegir una tercera matriu bidimensional (menu_pagines[]) al nostre fitxer que guardarà aquests valors. En anar passant per cada un dels elements de menu_valors, per exemple, nomes cal veure si la longitud de menu_pagines[i] és mes gran que zero, si és així, vol dir que té subpàgines i per tant, recorrem aquest bucle imprimint-les.

4. Pros i contres

Combinada amb la tècnica de repetició d'elements HTML, la que acabem d'explicar permet incloure d'una manera molt ràpida menús a cada una de les pàgines del nostre lloc amb les funcionalitats que nosaltres volguem, menus que a més son molt fàcils de mantenir donat que només s'ha d'anar actualitzant els arrays per tal que els menús de totes les pàgines es mantinguin al dia, de manera que el manteniment i la navegabilitat del lloc augmenten en gran manera.

Per contra, cal conèixer bé les matrius per saber quin número d'índex té cada una de les pàgines, tot i que això també es pot arreglar implementant una funció que dongui el número d'ordre en base al tema que s'està demanant. Ja se n'ha parlat abans de tot això, però pot ser no cal complicar-se tant, de fet nosaltres som qui entrem els continguts de les matrius, per tant, se suposa que les coneixem, no?

5. Codi per baixar

Al següent fitxer hi ha codi funcional per poder-lo usar al vostre lloc:

jsmenus.zip

El fitxer jsmenus.zip inclou:

menu.js: Funció amb valors d'exemple.
index.html: pàgina d'inici d'exemple
primera.html: pàgina d'exemple
segona.html: pàgina d'exemple
tercera.html: pàgina d'exemple