Menù orizzontale multilivello per Blogger


Per mettere in risalto le sezioni principali del blog o le pagine d'informazione e di contatto su Blogger come in qualsiasi altra piattaforma si preferisce optare per un menù orizzontale sotto al logo che su Blogger è comunemente conosciuto come il menù delle pagine che si può creare anche senza conoscere l'HTML in quanto è disponibile come widget. Il numero di sezioni che si possono andare ad aggiungere è limitato in quanto poi si vedrebbe male con l'aggiunta di una seconda riga ed in questi casi si può adottare il menù con sottosezioni. Il motivo per cui vado a creare quest'altro post è dovuto al fatto che per blog diversi si hanno esigenze diverse e quindi i menù precedentemente descritti risultano poco capienti oppure semplicemente non compatibili col modello in possesso.

Il menù che vado a presentare è di tipo orizzontale e multilivello cioè oltre alle prime sottosezioni al passaggio del mouse se ne vanno ad aprire altre; è utile per nascondere e gestire elenchi di link che non potrebbero entrare tutti ordinatamente nella sidebar laterale.

menu a tendina blogspot


Siccome non è un semplice widget ma bisogna inserire lunghi codici vi conviene salvare il modello per poterlo ripristinare in caso di guai coi codici del template.

Adesso dovete andare su Modello > Modifica HTML ed usare i tasti CTRL+F per cercare la riga ]]></b:skin> ed appena prima sopra di essa incollare il seguente css che ne stabilisce i colori, le dimensioni e le distanze tra un elemento e l'altro:
/* Menu orizzontale con casella di ricerca */
#menuMultilevel {
width:98%; /* Larghezza del menú */
height:35px;
padding-left:14px;
background:#D84938; /* Colore dello sfondo */
border-radius:12px; /* Raggio curvatura bordi voci principali */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#eee; /* Colore del testo delle voci senza mouse */
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Dimensioni dei font */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; /* Colore testo voce con mouse*/ }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#D84938; /* Colore di sfondo dei sottomenu */
padding:3px;
white-space:nowrap;
width:200px; /* Larghezza dei sottomenu */
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px; /* Larghezza dei sottomenu */
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#eee; /* Colore del testo delle voci senza mouse */
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Colore di sfondo dei sottomenu */
background:#D84938 url(https://lh5.googleusercontent.com/-sh2CKOpvhRs/UcoXC8lDgVI/AAAAAAAAiWg/_NDTZSeQ-ZE/s800/freccia-su.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#008250; /* Colore di sfondo al passaggio del mouse */
color:#fff; /* Colore del testo delle voci puntate dal mouse */
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Colore di sfondo al passaggio del mouse */
background:#008250 url(https://lh5.googleusercontent.com/-sh2CKOpvhRs/UcoXC8lDgVI/AAAAAAAAiWg/_NDTZSeQ-ZE/s800/freccia-su.gif) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #D84938; /* Colore di sfondo del sottomenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
/* CSS della casella di ricerca */
#search {
width: 228px; /* Larghezza della casella di ricerca */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Immagine di sfondo del motore di ricerca */
background: url(https://lh3.googleusercontent.com/-Da_UMxywwnY/UcoYOhXiQbI/AAAAAAAAiWs/N89PODWYsIU/s1600/ricerca.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Dopo averlo incollato salvate il modello, rimanendo sempre in questa sezione dovete cliccare sul pulsante Vai al widget e selezionare Header1, qui dovete cercare il termine "Intestazione"...


...e sotto i due tag di chiusura </div> </div> dovete incollare il codice sottostante che farà apparire il menù proprio sotto il logo o il titolo del blog:
<div id='menuMultilevel'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link_URL'><span>Voce 1</span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 2</span></a><ul class='sub'><li><a class='fly' href='#'>Voce 2.1</a><ul>
<li><a href='Link_URL'>Voce 2.1.1</a></li>
<li><a href='Link_URL'>Voce 2.1.2</a></li>
<li><a href='Link_URL'>Voce 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Voce 2.2</a>
<ul>
<li><a href='Link_URL'>Voce 2.2.1</a></li>
<li><a href='Link_URL'>Voce 2.2.2</a></li>
<li><a href='Link_URL'>Voce 2.2.3</a></li>
<li><a class='fly' href='#'>Voce 2.2.4</a>
<ul>
<li><a href='Link_URL'>Voce 2.2.4.1</a></li>
<li><a href='Link_URL'>Voce 2.2.4.2</a></li>
<li><a href='Link_URL'>Voce 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link_URL'>Voce 2.2.5</a></li>
<li><a class='fly' href='#'>Voce 2.2.6</a>
<ul>
<li><a href='Link_URL'>Voce 2.2.6.1</a></li>
<li><a href='Link_URL'>Voce 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link_URL'>Voce 2.3</a></li>
<li><a href='Link_URL'>Voce 2.4</a></li>
<li><a href='Link_URL'>Voce 2.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 3</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce 3.1</a></li>
<li><a href='Link_URL'>Voce 3.2</a></li>
<li><a href='Link_URL'>Voce 3.3</a></li>
<li><a href='Link_URL'>Voce 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 4</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce 4.1</a></li>
<li><a class='fly' href='#'>Voce 4.2</a>
<ul>
<li><a href='Link_URL'>Voce 4.2.1</a></li>
<li><a href='Link_URL'>Voce 4.2.2</a></li>
<li><a href='Link_URL'>Voce 4.2.3</a></li>
<li><a href='Link_URL'>Voce 4.2.4</a></li>
<li><a href='Link_URL'>Voce 4.2.5</a></li>
<li><a href='Link_URL'>Voce 4.2.6</a></li>
</ul>
</li>
<li><a href='Link_URL'>Voce 4.3</a></li>
<li><a href='Link_URL'>Voce 4.4</a></li>
<li><a href='Link_URL'>Voce 4.5</a></li>
<li><a href='Link_URL'>Voce 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 5</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce 5.1</a></li>
<li><a href='Link_URL'>Voce 5.2</a></li>
<li><a href='Link_URL'>Voce 5.3</a></li>
</ul>
</li>
<!-- Casella di Ricerca Inizio -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Cerca...&quot;;' onfocus='if (this.value == &quot;Cerca...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Cerca...'/></form>
</li>
<!-- Casella di Ricerca Fine -->
</ul>
</div>
Adesso salvate nuovamente il modello ed a salvataggio completato dovreste ritrovarvelo sul vostro blog. Se volete visualizzarlo prima del titolo del blog dovrete incollare il codice soprastante prima dell'area evidenziata. Se invece si dovesse vedere distorto provate ad eseguire l'ottimizzazione del modello in modo uguale per tutti i browser.

Chi non volesse la casella di ricerca all'interno del menù in modo da ottenere ancora più spazio dovrà eliminare tutto il codice compreso fra <!-- Casella di Ricerca Inizio -->  e <!-- Casella di Ricerca Fine -->
compresi essi stessi.

Prime sezioni

Per aggiungere le sezioni principali dovete inserire prima del codice della casella di ricerca un codice simile al seguente modificando l'indirizzo link e il nome della sezione:
<li class="top"><a href='Link_URL' class="top_link"><span>Voce X</span></a></li>

Seconde sezioni

Se ad una sezione volete aggiungere le sottosezioni dovete sostituire il codice delle prime sezioni con quest'altro:
<li class='top'><a href='Link_URL' class='top_link'><span class='down'>Voce X</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce X.1</a></li>
<li><a href='Link_URL'>Voce X.2</a></li>
<li><a href='Link_URL'>Voce X.3</a></li>
</ul>
</li>

Terze Sezioni

Oltre alle sottosezioni potete inserire i sottomenù per rendere il menù ancora più ampio, se ad esempio volete crearne uno per la sottosezione Voce X.2 dovete sostituire la riga blu con il codice seguente e poi sostituire link e nomi:
<li><a href='#' class='fly'>Voce X.2</a><ul>
<li><a href='Link_URL'>Voce X.2.1</a></li>
<li><a href='Link_URL'>Voce X.2.2</a></li>
<li><a href='Link_URL'>Voce X.2.3</a></li>
</ul></li>
Molto probabilmente questo menù non va bene per la versione mobile del blog, quindi se volete utilizzarlo potete attivare la versione mobile di Blogger in modo da fornire una visione del blog limitata ma più leggera e di dimensioni compatibili per tutti i dispositivi mobili.



37 commenti :

  1. Salve,
    sono sempre io... e nel ringraziarti per questo menù, molto più completo e, soprattutto, ben funzionante anche con Chrome volevo dirti che l'ho applicato senza problemi.

    L'unica cortesia che ti chiedo... com'è possibile modificare il colore delle voci TOP, quelle del menu orizzontale intendo, al passaggio del mouse come avviene per le voci dei sottomenu e dei sottosottomenu? Ho notato che, nel caso di voci del menu TOP senza sottovoci, sembra che non siano cliccabili... passando il mouse e cambiano colore come nei sottomenu l'utente potrebbe più facilmente capire che può cliccarlo...

    Sto provando i vari hoover ma nn mi funge bene!

    ISOLE GRECHE

    RispondiElimina
    Risposte
    1. Nel primo riquadro a fianco dei codici è riportata la spiegazione per modificare i colori senza o passando il mouse sulle voci. E' probabile che nel tuo tema diano più problemi comunque dovresti eliminare o modificare questi due elementi che si presentano più volte nel codice:
      color:#fff;
      color:#eee;

      Elimina
    2. Perdonami... mi sono spiegato male... intendevo lo sfondo, non le voci (testo).
      Come passando per il sottomenu, cambia colore lo sfondo della voce su cui passa il mouse, mi farebbe piacere lo facesse passando anche nelle caselle del menu TOP (quello orizzontale).

      Elimina
    3. dentro le parentesi di a.top_link devi inserire questo:
      background:#D84938;

      Elimina
  2. Salve,ho trovato molto utile questo post,ti volevo devo chiedere solo un chiarimento .Io adesso ho le pagine normali create con il widget di Blogger.Nelle sottosezioni io devo inserire i link delle pagine che ho creato per fare in modo che si aprano con tutti gli articoli
    tipo ,mettiamo il caso : Recensioni ( link della pagina con tutte le recensioni) - sottosezione letteratura contemporanea il link della pagina che ho creato che ha questo nome??

    RispondiElimina
    Risposte
    1. Devi eliminare il widget delle pagine (senza cancellare le pagine) e poi usare i codici di questo menù inserendo i link delle pagine se vuoi vederle con le sottosezioni.

      Elimina
  3. Salve, purtroppo ho un piccolo problema con il menù.
    Riesco a installarlo tranquillamente e ho tolto la casella di ricerca ma alcune voci principali (5 su 11) è come se mi rimanessero "fuori".
    In poche parole fanno parte del menù e presentano tutte le loro sottosezioni ma non presentano alcun colore di sfondo.
    Come posso rimediare o correggere un eventuale mio errore?
    Grazie per l'aiuto
    (Per dubbi il link al blog è http://blogprova73.blogspot.it/p/home-page_12.html)

    RispondiElimina
    Risposte
    1. a me non si aprono le sottosezioni (su questo avrai sbagliato tu), se ti riferisci solo alle voci principali devi cercare di mantenerle tutte in un unica riga. Puoi incrementare le dimensioni del blog per farcene entrare qualcuno in più da Modello>Personalizza>Modifica le larghezze. Puoi anche rimpicciolire le dimensione del testo e diminuire gli spazi tra una sezione e l'altra.

      Elimina
  4. Grazie Andrea!
    Non ti preoccupare, le sottosezioni le ho tolte io per comodità, questo è solo un blog di prova.
    Come posso diminuire invece gli spazi tra le varie sezioni?

    RispondiElimina
    Risposte
    1. dovresti modificare: padding:0 24px 0 12px;; cioè devi diminuire il numero 24. Per diminuire il testo devi cercare font-size:13px; ed inserire un numero inferiore.

      Elimina
  5. Riesco ad inserire 5 voci principali nel menu orizzontale e tutto funziona, incluse le sottosezioni, ma non accetta una sesta voce, pur non dando errore la sesta voce principale del menu non appare. Come fare? Ti ringrazio perchè il menui è dabbero funzionale e le spiegazioni esaustive.

    RispondiElimina
    Risposte
    1. agendo sul codice sorgente del tuo blog sono riuscito a mettere un'altra sezione principale con le sottosezioni, quindi è solo questione di codice, probabilmente l'avevi messo prima di qualche il o ul...
      ho notato che sei riuscito a metterla la sesta sezione, e finché c'è spazio in orizzontale puoi metterne anche di più.

      Elimina
    2. Ti ringrazio !! Sono riuscito a mettere la sesta sezione agendo appunto sui parametri della largezza e riducendo le dimensioni dei caratteri.

      Elimina
  6. Ottimo codice, lo sto ancora sistemando ma sembra funzionare a meraviglia, grazie mille! Ti volevo chiedere, come si fa a modificare la larghezza della barra di modo che sia la stessa del blog e non della pagina? Ho provato a smanettare con quel 98% che si legge all'inizio del codice, inserendo al suo posto il numero di px di larghezza del blog, ma la barra esce spostata tutta verso sinistra.

    RispondiElimina
    Risposte
    1. Ce l'ho fatta! Ho guardato nelle altre guide che hai scritto e ho trovato un codice per centrare il menù... l'ho modificato un po' e ha funzionato! Grazie ancora :)

      Elimina
  7. il menu e perfetto ho aggiunto altre voci senza problemi , pero vorrei cambiare il colore il rosso e troppo vivace e vorrei cambiarlo però non sono riuscito a capire come ho visto che ci sono de codici nella dicitura sfondo bisogna cambiare quelli e come fai a stabilire il tipo di colore ?

    RispondiElimina
    Risposte
    1. si, puoi usare questi strumenti online, dove clicchi su una gradazione di colore e ti appare il codice del colore, detto esadecimale o HEX:
      http://www.scuolissima.com/2013/11/codice-colori-esadecimali-online.html

      Elimina
  8. Innanzitutto grazie mille per lo splendido lavoro, sei estremamente chiaro nelle spiegazioni e se te lo dico io (che sono proprio incapace) credici! volevo però chiederti una cosa: se volessi inserire il menù orizzontale multilivello sopra l'immagine del logo, posso farlo? e se si, dove inserisco il secondo blocco di codice?

    RispondiElimina
    Risposte
    1. Lo puoi spostare direttamente dalla sezione "Layout", trascinando il gadget del menù sopra a quello del logo. Ma se quest'ultimo non si sposta devi andare nel modello, cercare la parola "intestazione", oppure prova a cercare il nome del tuo blog (es. Scuolissima) e in quella riga devi sostituire il termine TRUE con FALSE. Così facendo si potrà spostare.

      Elimina
  9. Salve, mi interesserebbe capire come modificare il colore della barra da rosso a grigio e anche come modificare gli altri colori della barra

    RispondiElimina
    Risposte
    1. Nel primo riquadro di codice, dopo ogni slash è presente la spiegazione. Adesso non ricordo a memoria quale sia ma dovrebbe essere questo per le sezioni principali:
      - background:#D84938; /* Colore dello sfondo */

      e quest'altro per le sottosezioni:
      - background:#D84938; /* Colore di sfondo dei sottomenu */

      Elimina
  10. ciao, prima di tutto, complimenti per l'ottima guida. volevo chiederti come si faceva a cambiare il font del carattere all'interno dei menu, sia sulla barra principale che nelle varie sotto categorie. grazie per la risposta.

    RispondiElimina
    Risposte
    1. Questo stabilisce il testo del font della barra principale:
      font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;

      Questo per le sottosezioni:
      font-family:arial, verdana, sans-serif;

      Elimina
  11. Ciao. Complimenti per l'utilissima guida. Avrei una domanda.
    Ho inserito il menu e sono riuscito anche ad inserire il colore di sfondo dei bordi, però solo al "primo livello". Quando devo aprire il "secondo livello" non riesco ad inserire il colore del bordo. Come posso risolvere? Non so se sono stato chiaro. Grazie mille.

    RispondiElimina
    Risposte
    1. Puoi provare ad inserire questo css per creare il bordo dentro ognuna delle parentesi graffe (a tentativi), iniziando da quelle dove appare la parola "sottomenu":

      border-style: solid !important;
      border-color: black !important,

      Elimina
    2. Grazie mille. Ho risolto! Sei stato gentilissimo :)

      Elimina
  12. Ciao! E' possibile modificare questo menù togliendogli i bordi arrotondati e dando dei bordi alle "caselle" voce 1, voce 2 etc?

    RispondiElimina
    Risposte
    1. Per eliminare i bordi arrotondati prova a rimuovere questa riga:
      border-radius:12px; /* Raggio curvatura bordi voci principali */

      Per aggiungere il bordo alle sezioni principali puoi inserire questo css:
      border: groove #660000; inserendolo subito dopo #menuMultilevel {

      Per aggiungere il bordo anche alle sottosezioni, vedi il mio commento precedente.

      Elimina
    2. No, non ha funzionato... Ha fatto un bordo attorno a tutto il menù, ma non alla casella voce 1, voce 2, voce 3...
      Inoltre vorrei sapere se, se io volessi rendere la pagina- sezione principale una lista di "anteprime" di altri post, raggruppati poi nelle sottosezioni, dovrei realizzarla manualmente o c'è un modo per renderla in un certo qual modo automatica? Grazie ancora

      Elimina
    3. Per il bordo prova ad inserire il codice dentro la parentesi graffe di ognuno di questi css:
      top_link {
      Insomma, ci devi andare a tentativi perché non ho una versione demo per provare.

      Per la seconda domanda, l'unica cosa che puoi provare è seguire questa guida (o cambiare tema che è la via più semplice):
      http://www.scuolissima.com/2014/12/come-personalizzare-la-homepage-di-blogger.html

      Elimina
  13. ho provato a mettere il primo css seguendo tutte le istruzioni, ma mi esce solo all'inizio della pagina il css e non mi modifica il menù...cosa sto sbagliando?

    RispondiElimina
    Risposte
    1. è probabile che il css lo stai inserendo nel modo sbagliato, prova a rifare lo stesso procedimento dopo aver letto quest'altra guida su come inserire il css correttamente:
      http://www.scuolissima.com/2014/08/come-aggiungere-codice-css-blogger.html

      Elimina
  14. Ciao, e grazie per il tuo aiuto.
    Quello che non so è come adattare il menu alla larghezza del Blog invece che alla pagina. Ho visto che qualcuno ha scritto che lo hai spiegato altrove, ma non l'ho trovato.
    Grazie.

    Saluti.

    http://recensioni-libri-tv.blogspot.it/

    RispondiElimina
    Risposte
    1. Come accorciare o centrare il menù classico di Blogger l'ho spiegato in questo articolo:
      http://www.scuolissima.com/2014/02/creare-menu-pagine-etichette-su-blogger.html

      Mentre il menù orizzontale multilivello di questa pagina va accorciato agendo sul valore percentuale 98%. Ma se lo accorci dovrai per forza centrarlo, inserendo questo codice:
      margin-left:auto; margin-right:auto;
      prima di width:98%;

      Elimina
  15. Infatti era proprio la centratura che mi mancava.
    Grazie davvero!
    Sei un grande!

    RispondiElimina
  16. Ciao caro. Ho tantissimo da ringraziarti. Sei una persona molto paziente, disponibile, e veramente gentile. Grazie a te, ho messo un altro menu a tendina nel mio blog, e non sapevo di aver bisogno di un menu così gigante. ^_^ Grazie veramente di cuore, sei unico.
    Scusami per il fastidio, ma non sapevo cosa fare, ed essendo una persona molto ignorante in tema, ho trovato per caso il tuo blog. Peccato non potermi iscrivere come GFC, ma ho attivato la mail con molto piacere. Di solito non capisco molto bene le spiegazioni lette, ma sentite o viste. ^^ è sempre più facile per me. Ma sei stato chiaro e paziente. grazie per questo articolo e le risposte.
    Grazie ancora una volta e non smetterò mai di ringraziarti. Un ultima domanda e smetto di stalkerare ^^ il menu è ok, ma se volesse cambiare colore si può? Buona giornata.

    RispondiElimina
    Risposte
    1. Guarda il commento "9.a". I problemi coi menù li abbiamo avuti tutti, chi prima chi dopo, nessuno sfugge...

      E grazie per le bellissime parole :)

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".