INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Voci di menu evidenziate in base alla pagina corrente con Javascript

Autore: Luca Ruggiero | Tell a Friend

Corso Java
Impara a programmare col linguaggio OOP della Sun.

Corso Javascript e DHTML
Impara a creare controlli ed animazioni!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

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.

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb