Pubblicato il 18/03/15e aggiornato il

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.


menù-multilivello

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.

demo-menu

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
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.




7 commenti :

  1. ciao ernesto, ho provato questo menu' su 3 livelli....ma me lo mette sopra la foto dell'header ......come mai??

    RispondiElimina
    Risposte
    1. Perché è strutturato in quel modo. Anche nella demo è posizionato lì. Se ti piace sotto l'header il codice lo devi incollare nel modello subito sotto la riga < /header > invece che nella posizione indicata nel post. Ho messo gli spazi nel tag altrimenti non mi avrebbe salvato il commento
      @#

      Elimina
    2. ah ..grazie ernesto...

      Elimina
  2. ho fatto come hai detto e sono riuscito a metterlo...ma abbi pazienza...siccome sono interessato a questo menu'....volevo chiederti...ho visto che arriva fino al "quarto elemento....ma si puo' aggiungere anche il "quinto, sesto etc"...oppure questo codice ne prevede solo 4?

    RispondiElimina
    Risposte
    1. I livelli al massimo sono tre ma gli elementi iniziali cioè le voci principali del menù possono essere nel numero che vuoi. Diminuendo il numero dei caratteri di ciascuna voce ce ne puoi fare entrare anche 10. Devi solo stare attento a mantenere la stessa sintassi.
      @#

      Elimina
  3. non riesco....sono neofita di questo argomento....mi puoi dare una mano per cortesia....? magari prendi il codice e mi fai vedere come si fa' ad aggiungerne altri..me ne servivano altri 3 oltre ai 4 del codice....

    RispondiElimina
    Risposte
    1. @# Aggiungi questo codice

      <li>
      <a href="#">Quinto elemento</a>
      <div class="submenu">
      <ul>
      <li><a href="#">Eligendi Optio<span></span></a></li>
      <li><a href="#">Atque Corrupti<span></span></a></li>
      <li><a href="#">Quos Dolores<span></span></a></li>
      <li><a href="#">Quas Molestias.<span></span></a></li>
      <li><a href="#">Libero Tempore<span></span></a></li>
      <li><a href="#">Dignissimos Ducimus<span></span></a></li>
      </ul>
      <div class="padding"></div>
      <div class="shadow"></div>
      </div>
      </li>
      <li>
      <a href="#">Sesto elemento</a>
      <div class="submenu">
      <ul>
      <li><a href="#">Eligendi Optio<span></span></a></li>
      <li><a href="#">Atque Corrupti<span></span></a></li>
      <li><a href="#">Quos Dolores<span></span></a></li>
      <li><a href="#">Quas Molestias.<span></span></a></li>
      <li><a href="#">Libero Tempore<span></span></a></li>
      <li><a href="#">Dignissimos Ducimus<span></span></a></li>
      </ul>
      <div class="padding"></div>
      <div class="shadow"></div>
      </div>
      </li>
      <li>
      <a href="#">Settimo elemento</a>
      <div class="submenu">
      <ul>
      <li><a href="#">Eligendi Optio<span></span></a></li>
      <li><a href="#">Atque Corrupti<span></span></a></li>
      <li><a href="#">Quos Dolores<span></span></a></li>
      <li><a href="#">Quas Molestias.<span></span></a></li>
      <li><a href="#">Libero Tempore<span></span></a></li>
      <li><a href="#">Dignissimos Ducimus<span></span></a></li>
      </ul>
      <div class="padding"></div>
      <div class="shadow"></div>
      </div>
      </li>

      prima di </ul> nella penultima riga del codice

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.