Menu che mostra evidenziata la voce della pagina corrente.

Come creare un semplice menù orizzontale con il CSS e come evicenziare il testo di ancoraggio della pagina che si sta visualizzando.

Utilizzando delle librerie javascript possono essere realizzati dei menù che mostrino evidenziata la pagina che si sta visualizzando. In questo post vedremo come possa essere realizzato un menù di questo tipo usando solo il CSS e che funzioni con tutti i principali browser.

Il trucco consiste nell'aggiungere un cancelletto agli URL seguito da una stringa che si chiamano rispettivamente marcatore hash e indicatore di frammento. In sostanza le singole voci del menù si evidenzieranno non solo al passaggio del mouse ma anche quando si sarà aperta una di queste pagine proprio cliccando sulla voce rispettiva. Questo serve soprattutto in quei siti in cui il navigatore debba avere l'esigenza di conoscere quale sia la pagina che sta visualizzando. Questa procedura è già stata utilizzata per creare dei link interni alle pagine web.

Il codice che andrò a mostrare potrà essere utilizzato su Blogger in un widget ma anche in una qualsiasi pagina web incollandolo in modalità HTML.

Il codice da incollare su Layout > Aggiungi un gadget > Base > HTML/Javascript è il seguente

<style type="text/css">
.act-menu a {font-size:1.3em;display:inline-block;margin-top:18px;padding:9px 14px;color:#333;font-weight:bold;text-decoration:none;}
.act-menu a:hover{background:#1882af;color:#fff;border-radius:6px;}
.act-menu a.active{background:#1882af;color:#fff;border-radius:6px;}
#act-menu a .active-link{background:#1882af;color:#fff;border-radius:6px;}
#pagina1:target, #pagina2:target, #pagina3:target, #pagina4:target, #pagina5:target{background:#1882af;color:#fff;border-radius:6px;}</style>
<div class="act-menu" >
<a href="URL-LINK1#pagina1" id="pagina1">Voce1</a>
<a href="URL-LINK2#pagina2" id="pagina2">Voce2</a>
<a href="URL-LINK3#pagina3" id="pagina3">Voce3</a>
<a href="URL-LINK4#pagina4" id="pagina4">Voce4</a>
<a href="URL-LINK5#pagina5" id="pagina5">Voce5</a>
</div>

Si salva e si posiziona preferibilmente sotto l'header. Possono essere personalizzati i codici dei colori e il raggio dell'arrotondamento. Come vedete gli URL hanno una aggiunta dopo il cancelletto. Per esempio per avere un link alla homepage di questo blog si dovrebbe creare una riga come questa

<a href="http://www.ideepercomputeredinternet.com#pagina1" id="pagina1">Home</a>

mentre per aggiungere una sesta voce bisogna aggiungere ,#pagina6:target prima della riga evidenziata di giallo . Dopo la riga evidenziata di verde va invece aggiunta la riga 

<a href="URL-LINK6#pagina6" id="pagina6">Voce6</a>

e così via per una eventuale settima voce. Da notare che la voce del menù sarà evidenziata solo se verrà cliccata e non se verrà solamente aperta la pagina relativa. In altri termini prendendo lo stesso esempio di prima la voce del menù si evidenzierà se nell'indirizzo del browser ci sarà questo URL

http://www.ideepercomputeredinternet.com#pagina1