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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsllpEB7z0SRzmEf8yBqL-GGi7kwd66fIMaAFMIVLo9lKktvjAUhGiWF8z7iVQcwrIOKw4zuVciDjhmm3Le6OQ_XBBG27FYwRU6jF-1zpF9IncgySfEDou-qDtHi2981sskwsYLuB0/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.

Demo
Clicca qui

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'> e <!-- 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.