Abbiamo già visto nell'articolo Un semplice menu per Dreamweaver come è possibile creare una serie di link, o 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 articolo realizzeremo invece lo stesso tipo di applicazione, ma utilizzeremo del testo al posto delle immagini. Sarà 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 menzionerò:
<!-- NOME FILE: homepage.html -->
<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.
Possiamo verificare la veridicità di questa affermazione analizzando i codici delle altre due pagine:
<!-- NOME FILE: forum.html -->
<html>
<head>
<title>forum</title>
<basefont size="2" face="Verdana">
</head>
<body link="#0000FF" alink="#0000FF" vlink="#0000FF">
<script language="javascript" src="menu.js"></script>
</body>
</html>
e
<!-- NOME FILE: email.html -->
<html>
<head>
<title>email</title>
<basefont size="2" face="Verdana">
</head>
<body link="#0000FF" alink="#0000FF" vlink="#0000FF">
<script language="javascript" src="menu.js"></script>
</body>
</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))
{
// Stampo a video la voce della pagina NON corrente
document.write(":: <a href='forum.html'>forum</a>");
}
else
{
// Stampo a video la voce della pagina corrente evidenziata in grassetto
document.write(":: <a href='forum.html'><b>forum</b></a>");
}
document.write("<br>");
if (QUESTA_PAGINA.indexOf("email.html") == (-1))
{
// Stampo a video la voce della pagina NON corrente
document.write(":: <a href='email.html'>email</a>");
}
else
{
// Stampo a video la voce della pagina corrente evidenziata in grassetto
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.
Ecco come si presenta il codice pulito e privo di commenti:
var QUESTA_PAGINA = document.URL;
document.write("<div>");
if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))
{
document.write(":: <a href='homepage.html'>homepage</a>");
}
else
{
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>");
È possibile visualizzare un esempio completo del menu
Buon menu a tutti :-)))
