Voci di menu evidenziate in base alla pagina corrente

Abbiamo già visto nell'articolo Un semplice menuper Dreamweaver com'è possibile creare una seriedi link, o se vogliamo essere precisi un menu, disposto inmaniera da evidenziare il link corrispondente alla paginacorrente, in modo da aumentare la navigabilità e farcapire all'utente in che sezione del sito che stàvisitando si trova.

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

In questo Aticolo, invece, realizzeremo si lo stesso tipo diapplicazione, ma utilizzando del testo al posto delleimmagine, quantunque sia possibile anche utilizzare leimmagini o qualsiasi altro elemento Htrml al posto dei linktestuali.

Facciamo un attimo il punto della situazione e rendiamociconto di cosa abbiamo bisogno, e perchè.
Ipotizziamo di avere un menu che punti a tutte le principalisezioni del nostro sito; per creare un esempio semplice esnello ipotizzo di avere i link alla homepage, alla paginadei 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 nonmensionerò:

 

<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 cuicostruiremo fisicamente il menu: è quindi opportunoincluderlo nella porzione di codice in cui si vuole che ilmenu compaia poi sulle nostre pagine Html.

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

Posso assicurarvi che è un'applicazione moltopiù lunga a dirsi che a farsi! Vediamo quindi ilcodice opportunamente commentato che compone il menu,all'interno del file menu.js:

 

// Inizializzo la variabile identificativa dell'indirizzo della pagina correntevar 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, quellache setta la condizione per la verifica della paginacorrente:

if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))

Il metodo di tipo String indexOf() effettua laricerca della stringa specificata tra parentesi e doppiapici; settiamo l'uguaglianza sul valore -1 nelcaso in cui la pagina non sia quella corrente e non vadaquindi evidenziata in grassetto.



Ti potrebbe interessare anche

commenta la notizia