Menù a tre livelli con CSS3 per Blogger.

Come installare un menù CSS3 multilivello per Blogger.

Riprendo la pubblicazione di post sui menù dopo un periodo di tempo che avevo tralasciato questo importante argomento per chi abbia un blog su Blogger. Ricordo che di default gli utenti di questa piattaforma hanno a disposizione il Menù delle Pagine Statiche a cui si possono aggiungere anche altri link pure non appartenenti al blog. 

Il menù delle pagine statiche può essere personalizzato e si può anche aggiungere una icona accanto al testo delle singole voci, si può perfino modificare l'aspetto di ciascuna voce e renderla diversa dalle altre però rimane la limitazione piuttosto sentita della impossibilità di presentarlo su più livelli al passaggio del cursore. In questo sito ho presentato diverse decine di menù in cui potete cercare quello che vi piace di più e con questo post ne aggiungo un altro che secondo me susciterà un certo interesse.

Il menù è su tre livelli e si possono creare le voci principali e quelle secondarie seguendo lo schema che viene presentato nella Demo. Per rendere le cose più semplici ho denominato Primo elemento, Secondo Elemento, Terzo Elemento e Quarto elemento le voci principali. Il menù sarà visibile sopra all'Header o Intestazione del sito ma volendo si può inserire anche più in basso.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la seguente riga

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

che determina l'inizio della regione interna del blog.  Subito sopra a questa si incolla questo

• Codice del Menù Multilivello per Blogger -

Si salva il template. La larghezza del menù è di 884 pixel è può essere modificata. Possono anche essere personalizzati i codici dei colori che mutano al passaggio del cursore (effetto hover). Oltre che con il CSS3 il menù si basa anche sulla libreria JQuery che nel codice è inserita tramite la riga evidenziata di giallo e che può essere tralasciata se già presente nel nostro modello. Le voci secondarie vengono create con la classe submenu e per indicare che una voce ha degli elementi secondari sono stati inseriti i simboli >> che naturalmente possono essere sostituiti da altri che però debbono essere supportati dal modello di Blogger. Ricordo ai meno esperti che gli URL delle pagine collegate vanno incollati al posto dei cancelletti ( # ) che si trovano accanto a ciascuna voce.

Fonte | Alhadis su Cpdepen -