Menu per Blogger con sottosezioni senza javascript

Non tutti sanno che su Blogger è possibile inserire un menu diverso da quello delle pagine statiche, ad esempio personalmente preferisco utilizzare su Scuolissima il menu quello sotto forma di HTML senza l'utilizzo di Javascript che rallentano il blog e che la maggior parte delle volte, col passar del tempo hanno problemi anche con altri codici Javascript.

Il menù di cui tratteremo questa volta oltre alla solita funzione delle sezioni ha anche la capacità di mostrare le sottosezioni, in questo modo si viene a creare un vero menù a discesa o a tendina.

Andate su Layout > Aggiungi un gadget > HTML/Javascript ed incollate il codice della prima tabella, poi trascinatelo sotto al widget dell'intestazione:

<div id='Scuolimenu'>
<ul id='Scuol'>
<li>
<a href='#'>Home</a>
<ul>
<li><a href='#'>About</a></li>
<li><a href='#'>Contattami</a></li>
<li><a href='#'>Privacy</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
</ul>
</li>
<li>
<a href='#'>Voce 1</a>
<ul>
<li><a href='#'>Voce 1.1</a></li>
<li><a href='#'>Voce 1.2</a></li>
<li><a href='#'>Voce 1.3</a></li>
</ul>
</li>
<li>
<a href='#'>Voce 2</a>
<ul>
<li><a href='#'>Voce 2.1</a></li>
<li><a href='#'>Voce 2.2</a></li>
<li><a href='#'>Voce 2.3</a></li>
</ul>
</li>
<li>
<a href='#'>Voce 3</a>
<ul>
<li><a href='#'>Voce 3.1</a></li>
<li><a href='#'>Voce 3.2</a></li>
<li><a href='#'>Voce 3.3</a></li>
</ul>
</li>
<li>
<a href='#'>Voce 4</a>
<ul>
<li><a href='#'>Voce 4.1</a></li>
<li><a href='#'>Voce 4.2</a></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>
<li><a href='#'>Voce 4.7</a></li>
</ul>
</li>
</ul>
</div>

Avete notato che dopo href è presente il cancelletto (#)? Sostituitelo con il link di un post che vorreste che appaia una volta che venga cliccato ed ovviamente sostituite la parola Voce con qualcosa di più semplice consono in base al link inserito. Le sezioni o sottosezioni in più possono essere rimosse, ricordatevi però che la lista delle sottosezioni debba iniziare con <ul> e finire con </ul>, altrimenti il codice apparirà un disastro.

Adesso salvate e andate a guardare il vostro blog. Il menu avrà un aspetto inguardabile appunto perché manca il codice css che dovrete andare ad incollare. Salvate anche il template nel caso in cui facciate qualche cazzata col codice così potrete rimetterlo in sesto in pochi secondi.
Recatevi quindi su Modello > Modifica HTML, fate apparire la casella di ricerca del modello cliccando Ctrl + F, cercate il codice </head>, poi premete invio e lo troverete evidenziato nel modello, subito prima di questo codice incollate il css inserito nella tabella qui sottostante:

<style type="text/css">
#Scuolimenu {
background: #221c1c !important;
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #a70100;
height:35px;
}
#Scuol {
margin: 0;
padding: 0;
}
#Scuol ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#Scuol li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #444;
border-right:1px solid #444;
height:35px;
}
#Scuol li a, #Scuol li a:link, #Scuol li a:visited {
color: #FFF;
display: block;
font:normal 12px Trebuchet, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#Scuol li a:hover, #Scuol li a:active {
background: #f20100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#Scuol li {
float: left;
padding: 0;
}
#Scuol li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 140px;
margin: 0;
padding: 0;
}
#Scuol li ul a {
width: 140px;
}
#Scuol li ul ul {
margin: -25px 0 0 161px;
}
#Scuol li:hover ul ul, #Scuol li:hover ul ul ul, #Scuol li.sfhover ul ul, #Scuol li.sfhover ul ul ul {
left: -999em;
}
#Scuol li:hover ul, #Scuol li li:hover ul, #Scuol li li li:hover ul, #Scuol li.sfhover ul, #Scuol li li.sfhover ul, #Scuol li li li.sfhover ul {
left: auto;
}
#Scuol li:hover, #Scuol li.sfhover {
position: static;
}
#Scuol li li a, #Scuol li li a:link, #Scuol li li a:visited {
background: #ff3837;
width: 140px;
color: #FFF;
display: block;
font:normal 12px Trebuchet, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #444;
}
#Scuol li li a:hover, #Scuol li li a:active {
background: #473b3b;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
</style>

Come ogni CSS, questo può essere modificato a proprio piacimento. Impostate la larghezza che volete, il font del carattere e il colore che più vi piace e che si adatta anche allo sfondo e alla tematica del vostro blog. In rosso sono selezionati i punti in cui potrete iniziare con le modifiche.

#221c1c è il colore di background del menù principale.

#f20100 è il colore di background quando il mouse passa su una scheda.

#ff3837 è il colore del menù quando il cursore passa su una voce principale.

#473b3b è il colore di sfondo quando si passa sopra a una voce secondaria con il mouse.

#FFF cioè #FFFFFF è il colore del testo delle varie voci.

#444 cioè #444444 è il colore del bordo.

font:normal 12px Trebuchet, sans-serif; serve per modificare Font e Dimensione dei caratteri.

Su Chrome e Firefox questo menù funziona perfettamente, mentre su Internet Explorer con l'attuale versione potrebbe non funzionare, per renderlo funzionante anche su Internet Explorer dovete eseguire l'ottimizzazione del modello per tutti i tipi di browser come spiegato in un articolo precedente.

LEGGI ANCHE: Menù multilivello (consigliato)
LEGGI ANCHE: Come creare menù espandibile

LINK UTILI

ISCRIVITI ALLA NEWSLETTER

INFO