Pubblicato il 23/10/16 - aggiornato il  | 16 commenti :

Menù multilivello per la versione desktop di Blogger con casella di ricerca.

Come installare un menù su 2, 3, o 4 livelli con solo CSS3 senza javascript che abbia anche opzionalmente una casella di ricerca e che sia completamente personalizzabile nei colori, nei font e nelle dimensioni.
Visto le numerose richieste che ho ricevuto sul menù attualmente installato su questo sito ho pensato di pubblicare un post per condividerne la procedura di installazione. Innanzitutto bisogna ricordare che questo menù è multilivello e che si possono cioè creare fino a 4 livelli di voci di menù.

Un'altra caratteristica che me lo ha fatto preferire ad altri menù è quella che non utilizza javascript ma solo CSS3 e questo lo rende molto più rapido nell'apertura e non appesantisce la velocità del sito oltre a non aver bisogno di javascript o hosting esterni.

Il menù originale ha anche una sua casella di ricerca che però personalmente ho tolto preferendo il motore di ricerca di Adsense che è indubbiamente più performante. Nel codice ho anche inserito due tag di posizionamento in modo da settare la distanza del menù dal contenuto che gli sta al di sopra e da quello che gli sta al di sotto. Il menù può essere installato insieme a quello ufficiale delle Pagine Statiche. Quest'ultimo si può lasciare per esempio sotto l'Intestazione mentre il Menù multilivello può essere posizionato sopra all'Header.

Oltre ai codici dei colori  possono essere personalizzati molti altri elementi quali gli arrotondamenti e le larghezze dei sottomenù. Visto che vengono configurate le larghezze, il menù è installabile solo nella versione desktop quindi ho aggiunto i tag condizionali per mostrarlo solo in quella versione e nasconderlo in quella mobile. In quest'ultima si può aggiungere un menù specifico per tale versione. Infine il menù può essere installato sia nei modelli che hanno la Navbar ufficiale di Blogger sia nei modelli in cui è stata tolta.

menù-multilivelllo

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin> che si trova intorno alla 12-esima riga. Si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice della sezione. Poi si cerca l'ultima riga ]]></b:skin> della stessa sezione con Ctrl+F e infine, subito sopra a questa, si incolla il codice seguente

/* Menu orizzontale con casella di ricerca - Inizio */
#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; /* Famiglia dei font */}
.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuw-kYregNQMGhgqoAx6yb4qx1qCMjUL14M_gl5pGC47KWv7-WUgpJ7_4Y9rjewsUKqpfiy2Imb9kBMsH6bC0PzJQ_TZz6EdXOlnumVRb9Diezv7pG3YPmKRNkKi2JuW08p5sHUaalto/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuw-kYregNQMGhgqoAx6yb4qx1qCMjUL14M_gl5pGC47KWv7-WUgpJ7_4Y9rjewsUKqpfiy2Imb9kBMsH6bC0PzJQ_TZz6EdXOlnumVRb9Diezv7pG3YPmKRNkKi2JuW08p5sHUaalto/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;
}
/* Menu orizzontale con casella di ricerca - Fine */






Se si vuole posizionare il menù sopra all'Intestazione si deve cercare la riga <header> per incollavi il codice HTML subito sopra mentre se si vuole posizionare sotto all'Intestazione si cerca la riga </header> e vi si incolla il codice subito sotto. In ogni caso un esempio di codice è questo

<!-- Menu Multilivello - Inizio -->
<b:if cond='!data:blog.isMobile'>
<!-- Posizionamento in alto -->
<div style='margin-top:-5px;'/>
<div id='menuMultilevel'>
<ul class='menu'>
<li class='top'><a class='top_link' href='#'><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='#'>Voce 2.1.1</a></li>
<li><a href='#'>Voce 2.1.2</a></li>
<li><a href='#'>Voce 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Voce 2.2</a>
<ul>
<li><a href='#'>Voce 2.2.1</a></li>
<li><a href='#'>Voce 2.2.2</a></li>
<li><a href='#'>Voce 2.2.3</a></li>
<li><a class='fly' href='#'>Voce 2.2.4</a>
<ul>
<li><a href='#'>Voce 2.2.4.1</a></li>
<li><a href='#'>Voce 2.2.4.2</a></li>
<li><a href='#'>Voce 2.2.4.3</a></li>
</ul>
</li>
<li><a href='#'>Voce 2.2.5</a></li>
<li><a class='fly' href='#'>Voce 2.2.6</a>
<ul>
<li><a href='#'>Voce 2.2.6.1</a></li>
<li><a href='#'>Voce 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Voce 2.3</a></li>
<li><a href='#'>Voce 2.4</a></li>
<li><a href='#'>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='#'>Voce 3.1</a></li>
<li><a href='#'>Voce 3.2</a></li>
<li><a href='#'>Voce 3.3</a></li>
<li><a href='#'>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='#'>Voce 4.1</a></li>
<li><a class='fly' href='#'>Voce 4.2</a>
<ul>
<li><a href='#'>Voce 4.2.1</a></li>
<li><a href='#'>Voce 4.2.2</a></li>
<li><a href='#'>Voce 4.2.3</a></li>
<li><a href='#'>Voce 4.2.4</a></li>
<li><a href='#'>Voce 4.2.5</a></li>
<li><a href='#'>Voce 4.2.6</a></li>
</ul>
</li>
<li><a href='#'>Voce 4.3</a></li>
<li><a href='#'>Voce 4.4</a></li>
<li><a href='#'>Voce 4.5</a></li>
<li><a href='#'>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='#'>Voce 5.1</a></li>
<li><a href='#'>Voce 5.2</a></li>
<li><a href='#'>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>
<!-- Posizionamento in basso -->
  <div style='margin-bottom:3px;'/>
</b:if>
<!-- Menu Multilivello - Fine -->

Si salva il modello. Al posto dei cancelletti # si incollano gli URL dei post, delle pagine o anche dei siti esterni a cui collegare la singola voce. La personalizzazione dei CSS è facilitata dalla colorazione in rosso dei parametri più importanti da personalizzare con accanto un commento che illustra a che cosa si riferisce quel determinato tag. La larghezza del menù è impostata in modo proporzionale (98%) rispetto a tutto il layout.

Le righe evidenziate di giallo servono per mostrare il menù solo nella versione desktop. Ho aggiunto due righe evidenziate di verde. La prima serve per settare la distanza del menù dai contenuti che stanno al di sopra e la seconda per settare la distanza da quelli che stanno al di sotto. I numeri dei pixel rispettivamente -5px per la parte alta e 3px per quella bassa sono puramente indicativi. Se si vuole aumentare una distanza si aumenta il valore positivo o si diminuisce quello negativo. Si fa l'opposto per diminuire lo spazio tra il menù e gli altri contenuti. 

PERSONALIZZARE LE VOCI DEL MENÙ


Per esperienza personale vi consiglio di installare il menù su un blog di prova e solo quando sia perfettamente funzionante installarlo nel blog principale. Inoltre è opportuno che all'inizio inseriate il codice HTML del menù, che è il secondo di questo post, così com'è per personalizzarlo successivamente a tappe salvando il template ogni volta per vedere se funziona. Purtroppo capita anche ai più bravi di saltare un tag <ul> o <li> che poi sballa tutto il menù.

Il menù consta si 5 voci principali. Se ne possono aggiungere altre incollando prima di <!-- Casella di Ricerca Inizio --> una o più righe di codice come questa

<li class="top"><a href='#' class="top_link"><span>Voce 6</span></a></li>

Se volete inserire anche un secondo livello di menù allora il codice diventa

<li class='top'><a href='#' class='top_link'><span class='down'>Voce 6</span></a>
<ul class='sub'>
<li><a href='#'>Voce 6.1</a></li>
<li><a href='#'>Voce 6.2</a></li>
<li><a href='#'>Voce 6.3</a></li>
</ul>
</li>

dove oltre alla classe top per la voce principale viene usata la classe sub per il sottomenù. Se volessimo inserire un nuovo livello di sottomenù, per esempio al posto della Voce 6.1, dovremmo sostituire la riga evidenziata di giallo con questo codice in cui viene aggiunto un nuovo elenco

<li><a href='#' class='fly'>Voce 6.1</a>
<ul>
<li><a href='#'>Voce 6.1.1</a></li>
<li><a href='#'>Voce 6.1.2</a></li>
<li><a href='#'>Voce 6.1.3</a></li>
</ul>

</li>

e in cui è stata usata la classe fly. Questa sintassi deve essere usata per eventualmente modificare la struttura del menù e togliere dei sottomenù a una voce per magari aggiungerne a un'altra.

COME NASCONDERE LA CASELLA DI RICERCA


Se consideriamo superflua la casella di ricerca, perché già presente nel nostro sito, si può togliere facilmente. Nel primo codice vanno cancellati tutti i blocchi che stanno dopo la riga /* CSS della casella di ricerca */ compresa quest'ultima. Nel secondo codice si cancella tutto quello che c'è tra <!-- Casella di Ricerca Inizio --> e <!-- Casella di Ricerca Fine -->  comprese tali righe.


Il menù sarà correttamente visualizzato con tutti i principali browser compreso Microsoft Edge. Il sistema migliore per realizzare il menù multilivello è quello di partire dalle 4, 5 o 6 voci principali con un codice come il seguente

<li class="top"><a href='#' class="top_link"><span>Voce 1</span></a></li>
<li class="top"><a href='#' class="top_link"><span>Voce 2</span></a></li>
<li class="top"><a href='#' class="top_link"><span>Voce 3</span></a></li>
<li class="top"><a href='#' class="top_link"><span>Voce 4</span></a></li>
<li class="top"><a href='#' class="top_link"><span>Voce 5</span></a></li>
<li class="top"><a href='#' class="top_link"><span>Voce 6</span></a></li>

da sostituire al codice di esempio compreso tra le righe <ul class='menu'><!-- Casella di Ricerca Inizio --> escluse. Successivamente si può passare a inserire i sottomenù a ciascuna voce principale e, se è il caso, aggiungere dei nuovi sottomenù ad alcune voci secondarie e così via fino al quarto livello seguendo la sintassi illustrata in questo post. 


16 commenti :

  1. Si può bloccare in alto durante lo scrolling?

    RispondiElimina
    Risposte
    1. Ho provato inserendo dei position:fixed ma resta bloccato nella sua posizione e quando faccio lo scroll va dietro la pagina. Ho provato anche con delle guide trovate in giro per il web che richiamano il jquery ma o non funzionano o non sono capace a inserire il codice giusto. Quindi se è possibile fare in qualche modo sarei lieto se me lo potessi spiegare.
      Grazie

      Elimina
  2. Prova con questa soluzione
    http://www.ideepercomputeredinternet.com/2014/08/menu-flottante-icone-sociali-casella-ricerca.html
    @#

    RispondiElimina
  3. Ciao ernesto una domanda se io vorrei realizzare un menu semplice senza sotto livelli con la casella di ricerca come dovrei modificare il codice?

    RispondiElimina
    Risposte
    1. @# Puoi usare anche questo menù se ti piace. Il primo codice lo lasci uguale mentre il secondo lo puoi modificare in questo modo

      <!-- Menu Multilivello - Inizio -->
      <b:if cond='!data:blog.isMobile'>
      <!-- Posizionamento in alto -->
      <div style='margin-top:-5px;'/>
      <div id='menuMultilevel'>
      <ul class='menu'>
      <li class="top"><a href='Link_URL' class="top_link"><span>Voce 1</span></a></li>
      <li class="top"><a href='Link_URL' class="top_link"><span>Voce 2</span></a></li>
      <li class="top"><a href='Link_URL' class="top_link"><span>Voce 3</span></a></li>
      <li class="top"><a href='Link_URL' class="top_link"><span>Voce 4</span></a></li>
      <li class="top"><a href='Link_URL' class="top_link"><span>Voce 5</span></a></li>
      <li class="top"><a href='Link_URL' class="top_link"><span>Voce 6</span></a></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>
      <!-- Posizionamento in basso -->
      <div style='margin-bottom:3px;'/>
      </b:if>
      <!-- Menu Multilivello - Fine -->

      mettendo gli URL dei collegamenti al posto dei cancelletti

      Elimina
    2. Per personalizzare i valori di -5px r di 3px leggi la seconda parte del post
      @#

      Elimina
  4. Ciao, Ernesto c'e un modo per fare aprire le finestre del sottomenu' sia verso destra sia verso sinistra. ciao e grazie

    RispondiElimina
    Risposte
    1. In teoria tutto è possibile ma bisognerebbe mettere mano a tutto il codice quindi non te lo consiglio
      @#

      Elimina
    2. ok, grazie. Ma volendo provarci hai qualche consiglio?

      Elimina
  5. Ciao Ernesto,
    Ormai il tuo blog è per me la BIBBIA.
    TI CHIEDO:
    Questo menu non funziona per la versione mobile, vero?
    Esiste un tuo post che spieghi come installare un menù a tendina con sottolivello per mobile e desktop ?? Grazie come sempre.
    Tuo adepto,
    Lillo Strillo.

    RispondiElimina
    Risposte
    1. Per la versione mobile c'è questo
      https://www.ideepercomputeredinternet.com/2017/03/blogger-mobile-multilevel-menu.html
      In genere occorre usare due diversi menù per il mobile e il desktop se non si ha un tema responsive
      https://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      @#

      Elimina
  6. Ciao, scusa ho notato nel demo che la sottovoce 4.2 quando si apre la tendina a fianco di ciascuna voce vi sono delle icone, come faccio a inserirle nel menu.
    Ciao e grazie.

    RispondiElimina
    Risposte
    1. Sono inserite automaticamente attraverso il CSS e hanno questo indirizzo
      https://lh5.googleusercontent.com/-sh2CKOpvhRs/UcoXC8lDgVI/AAAAAAAAiWg/_NDTZSeQ-ZE/s800/freccia-su.gif
      Vengono inserite nelle voci in cui c'è class='fly'
      @#

      Elimina
    2. Ciao, Grazi di avermi risposto, ma forse non mi sono espresso bene, scusami, non mi riferivo alle freccia, ma alle icone che si vedono a fianco delle voci 4.2.1., 4.2.2, ecc. dove si vedono icone di un cd, di un telefono, ecc.
      Ciao e grazie.

      Elimina
    3. Sono simboli Unicode che possono essere aggiunti come qualsiasi altro carattere 📀, 💾, 📞, 📺, 📽. Si possono copiare e incollare come fossero dei numeri o delle lettere. Per maggiori info leggi qui
      https://www.ideepercomputeredinternet.com/2018/01/ascii-unicode.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy