Installare su Blogger un menù con due livelli e più colonne.

Come installare il Megamenù per Blogger con le voci secondarie organizzate in colonne per aggiungere molti collegamenti.

Anche oggi vediamo come installare un menù su Blogger che ha la particolarità di avere una grande ricchezza di voci ed è quindi adatto a chi voglia mostrare ai visitatori un gran numero di collegamenti. In questo menù invece di privilegiare il numero dei livelli si punta su quello delle colonne.

Come certo saprete ci sono menù che hanno delle voci secondarie per ogni voce principale e molte voci secondarie aprono a loro volta un livello successivo del menù. In questo caso ci sono solo due livelli ma il secondo livello invece di avere le voci poste in verticale le ha suddivise in colonne e questo dà modo di aggiungere molti elementi. Questo stile di menù è molto utilizzato in siti professionali e sono sicuro che incontrerà il gradimento di molti lettori.

Il posizionamento avviene subito sotto alla Intestazione eventualmente anche sotto al Menù delle Pagine Statiche di Blogger che può coesistere con questo Megamenù.

Come vedete nello screenshot precedente quando si passa con il mouse sulla voce Etichette si visualizza un sottomenù suddiviso in 4 colonne. Non è necessario inserire 4 colonne in ciascuna voce. Se ne possono mettere anche solo una o due o tre. I colori sono ovviamente personalizzabili.

COME INSTALLARE IL MEGAMENÙ PER BLOGGER

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga </body> che si trova nella parte bassa del modello. Subito sopra a questa riga si incolla questo codice

<!--Megamenu Inizio-->
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/progetto3322/archivio/jkmegamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jkmegamenu.definemenu(&quot;elemento1&quot;, &quot;menu1&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento2&quot;, &quot;menu2&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento3&quot;, &quot;menu3&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento4&quot;, &quot;menu4&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento5&quot;, &quot;menu5&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento6&quot;, &quot;menu6&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento7&quot;, &quot;menu7&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento8&quot;, &quot;menu8&quot;, &quot;mouseover&quot;)
    </script>
<!--Megamenu Fine -->

Sono state inseriti otto elementi di menù. Tale numero di elementi può essere modificato eliminando una riga o aggiungendone nuove utilizzando la stessa sintassi. A ciascun elemento è stato aggiunto l'evento mouseover che indica il passaggio del cursore sopra allo stesso. Con questa impostazione il menù secondario si spiegherà quando ci passa sopra alla voce con il mouse. Sostituendo mouseover con click il menù secondario si dispiegherà con un click sulla voce in oggetto. La voce dell'elemento8 della Demo ha impostato un evento click contrariamente al codice proposto.

Demo
Clicca qui

Chi abbia un blog con dominio personalizzato dovrà incollare nella barra del browser l'indirizzo del javascript caricato su Google Sites per scaricarlo. Tale file potrà poi essere incollato su Dropbox per poi ottenerne il link di download che andrà sostituito a quello colorato di rosso.

Si va quindi intorno alla decima riga del modello e si clicca sulla freccetta nera accanto alla sezione <b:skin> per visualizzarne tutto il codice. Con Ctrl+F si cerca l'ultima riga di tale sezione ]]></b:skin> e, subito sopra a questa, si incolla questo nuovo codice

/* MEGAMENU */
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: #940F04 !important;
font-size:12px;
z-index: 100;
color: #ffffff;   
font-size: 11px;   
text-align:left;   
background-color:#940F04 !important;   
}
ul#nav{background-color:#940F04 !important;}
.megamenu .column{
float: left;
width: 175px; /*larghezza di ciascuna colonna del menu */
}
.megamenu .column ul{
margin: 0;
padding: 10px;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 0px;
}
.megamenu .column h3{
background: #940F04 !important;
font: bold 12px;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: #003366;
}
.megamenu .column li a{
color: #ffffff;   
font-size: 12px;   
text-align:left;   
background-color:#940F04;   
padding:3px 5px;
text-decoration:none;   
display:block;
}
.megamenu .column li a:hover{
background-color: #FDBCB7;   
color:#FFF;
}
.megamenu .column li{
list-style-type: none;
}

in cui possono essere personalizzati i codici dei colori del menù principale, delle voci secondarie e di quelle in cui si passa sopra con il mouse (hover), la larghezza delle colonne e la dimensione dei caratteri. Si salva il modello per passare all'HTML del menù.

COME REALIZZARE IL MENÙ CON L'HTML

La realizzazione pratica del menù è una delle cose più fastidiose per la grande attenzione che vi va posta. Per facilitare i lettori ho creato un codice di esempio:

• Codice HTML di esempio del Megamenù -

Si utilizzano gli ID elemento1, elemento2, ...ecc... menu1, menu2, ..ecc per le singole voci in cui inserire il link e il titolo. Per creare una nuova colonna si utilizza il tag <div class="column"> per poi iniziare un nuovo elenco con il tag <ul> e i tag <li>. Nell'esempio la seconda voce ha quattro colonne, la terza ha due colonne mentre le altre ne hanno una soltanto. Questa distribuzione può anche essere modificata. In definitiva le personalizzazioni più importanti sono le seguenti

1. Il colore dello sfondo del menù è #940F04;
2. La dimensione dei caratteri è di 12 pixel
3. Il colore delle voci secondarie del menù è bianco #ffffff;
4. La distanza tra il testo del menù e il suo contenitore è di 10 pixel (padding)
5. Il colore delle voci secondarie del menù è #003366; quando ci si passa sopra con il mouse
6. Il colore di sfondo delle voci secondarie diventa #FDBCB7; nel momento in cui ci passa sopra il mouse

Ciascuna colonna delle voci secondarie ha questa struttura HTML

<div class="column"><ul> <li> ....  </li>    ..... <li> ....  </li> </ul></div>

Ogni voce ha questa struttura HTML di base

<li><a href="URL_POST" title="NOME_POST">TITOLO POST</a></li>

Dopo aver creato il codice HTML del menù, o meglio ancora utilizzando quello di esempio per poi modificarlo successivamente, si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript quindi si incolla in Sezioni del sito e si posiziona sotto alla Intestazione

quindi si va in alto a destra su Salva disposizione. In alcuni modelli di Blogger il menù appare con un gradiente o sfumatura che è tipica anche del menù delle Pagine Statiche

Si può eliminare la sfumatura cercando nel modello questo blocco di codice

.tabs-inner .widget ul {   background: $(tabs.background.color)  $(tabs.background.gradient) repeat-x scroll 0 -800px;

quindi si cancella la stringa evidenziata di verde. Il codice che ho utilizzato nel post in cui ho spiegato come fissare in alto i menù di Blogger allo scorrere della pagina non funziona per questo menù.