Menù su più livelli con CSS3 e pagina attiva.

Come installare un menù CSS3 che al passaggio del mouse mostri i tre livelli di elementi da cui è composto.

L'introduzione del linguaggio CSS3 ha dato modo agli sviluppatori di creare oggetti HTML che si animano al passaggio del cursore senza bisogno di utilizzare librerie javascript che aumentano la pesantezza della pagina e che quindi diminuiscono la velocità di caricamento del sito. 

I CSS3 stanno avendo grande importanza nella realizzazione di menù particolarmente ricchi. Quello che vado a presentare oggi è da considerarsi uno dei migliori perché oltre che essere su tre livelli permette ai lettori di visualizzare la pagina in cui si trovano mediante un triangolino colorato. Si possono naturalmente modificare i codici dei colori e la famiglia di font oltre che progettare il nostro menù partendo dalle voci principali per poi aggiungere quelle secondarie solo negli elementi desiderati. Le voci secondarie potranno avere a loro volta una suddivisione in altri elementi. Tutta questa operazione va fatta con i tag <ul> e </ul> che determinano l'inizio e la fine di un elenco o sottoelenco e con i tag <li> e </li> che determinano invece il singolo elemento del menù. Le voci secondarie invece debbono essere configurate mediante opportune classi di stile come vedremo in seguito

Sulla falsariga del post in cui ho illustrato un altro menù multilivello ho pensato di proporre l'inserimento del menù subito sopra alla Intestazione (o Header) del blog ma volendo può essere inserito anche più in basso. Si va su Modello e si salva il template andando su Backup/Ripristino per salvare il modello completo nel caso le cose non andassero a buon fine. Sempre su Modello si clicca su Modifica HTML e digitando Ctrl+F si cerca la riga seguente

<div class='region-inner header-inner'>

Subito sopra a questa si incolla il seguente codice postato in un documento di Google Drive

• Codice Menù CSS3 per Blogger -

Opzionalmente si possono modificare i codici dei colori e la famiglia di caratteri. È invece necessario creare le voci del menù secondo le nostre esigenze. Il tag class="active" va inserito nella voce in cui si vuole che compaia il triangolo colorato che si visualizzerà anche sulle altre voci al passaggio del cursore

Per creare un elemento senza voci secondarie si usa la struttura della riga evidenziata di giallo

<li><a href="#"><span>About</span></a></li>

con i tag <li> e </li> e il cancelletto (#) che dovrà essere sostituito dall'URL del link collegato. Gli elementi con le voci secondarie debbono invece avere il tag class="has-sub" e le voci del livello più basso essere inserite tra i tag <ul> e </ul>. È importante per il corretto funzionamento del menù inserire negli ultimi elementi degli elenchi principali e secondari il tag class="last".