Voci di menu evidenziate in base alla pagina corrente con Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Abbiamo già visto nell'articolo "Un semplice menu per Dreamweaver" com'è possibile creare una serie di link, o se vogliamo essere precisi un menu, disposto in maniera da evidenziare il link corrispondente alla pagina corrente, in modo da aumentare la navigabilità e far capire all'utente in che sezione del sito che stà visitando si trova.

L'articolo appena citato realizza un menu del genere con le immagini e con una serie di lunghe e pastose funzioni, il cui codice è ridondante e poco leggibile, quasi assurdo da modificare in funzione delle proprie esigenze.

In questo Aticolo, invece, realizzeremo si lo stesso tipo di applicazione, ma utilizzando del testo al posto delle immagine, quantunque sia possibile anche utilizzare le immagini o qualsiasi altro elemento Htrml al posto dei link testuali.

Facciamo un attimo il punto della situazione e rendiamoci conto di cosa abbiamo bisogno, e perchè.
Ipotizziamo di avere un menu che punti a tutte le principali sezioni del nostro sito; per creare un esempio semplice e snello ipotizzo di avere i link alla homepage, alla pagina dei contatti ed a quella del forum.

Creiamo quindi i file

  • homepage.html
  • forum.html
  • email.html
i cui codici di base si differenziano solo per il <title> o per altri elementi grafici e logici che non mensionerò:
<html>
 <head>
  <title>homepage</title>
  <basefont size="2" face="Verdana">
 </head>
<body link="#0000FF" alink="#0000FF" vlink="#0000FF">

<script language="javascript" src="menu.js"></script>

</body>
</html>
Un'analogia per tutti i file che si andrà a creare è l'inclusione del file menu.js in cui costruiremo fisicamente il menu: è quindi opportuno includerlo nella porzione di codice in cui si vuole che il menu compaia poi sulle nostre pagine Html.

Utilizzeremo come parametro di identificazione della pagina corrente il nome del file corrente, reperendolo all'interno della barra degli indirizzi del browser; se la condizione si verifica, cioè se la stringa "nomefile.estensione" viene trovata, evidenzieremo la voce del menu di riferimento in grassetto (o con qualsiasi altra stilizzazione a gusto dello sviluppatore), altrimenti la mostreremo con lo stesso stile delle altre voci di menu non corrispondenti alla pagina corrente.

Posso assicurarvi che è un'applicazione molto più lunga a dirsi che a farsi! Vediamo quindi il codice opportunamente commentato che compone il menu, all'interno del file menu.js:
// Inizializzo la variabile identificativa dell'indirizzo della pagina corrente
var QUESTA_PAGINA = document.URL;

document.write("<div>");

if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))
{
    // Stampo a video la voce della pagina NON corrente
    document.write(":: <a href='homepage.html'>homepage</a>");
}
else
{
    // Stampo a video la voce della pagina corrente evidenziata in grassetto
    document.write(":: <a href='homepage.html'><b>homepage</b></a>");
}

document.write("<br>");

if (QUESTA_PAGINA.indexOf("forum.html") == (-1))
{
    document.write(":: <a href='forum.html'>forum</a>");
}
else
{
    document.write(":: <a href='forum.html'><b>forum</b></a>");
}

document.write("<br>");

if (QUESTA_PAGINA.indexOf("email.html") == (-1))
{
    document.write(":: <a href='email.html'>email</a>");
}
else
{
    document.write(":: <a href='email.html'><b>email</a></b>");
}

document.write("</div>");
Prendiamo adesso la parte di codice clou dello script, quella che setta la condizione per la verifica della pagina corrente:
if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))
Il metodo di tipo String indexOf() effettua la ricerca della stringa specificata tra parentesi e doppi apici; settiamo l'uguaglianza sul valore -1 nel caso in cui la pagina non sia quella corrente e non vada quindi evidenziata in grassetto.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD