Megamenù: alternative per l'installazione nei diversi modelli di Blogger.

Il Megamenù orizzontale che ho presentato ieri ha avuto un discreto riscontro tra i lettori. C'è chi lo ha installato senza problemi e chi invece non è riuscito nel compito perché ha un blog con un modello vecchio. Credo sia opportuno fare delle precisazioni per aiutare più persone possibili che siano interessate a inserirlo nel template.

1. Ho testato il menù solo su alcuni nuovi modelli e su un vecchio template che ho in Bacheca per fare dei test. Si tratta del modello Tekka. Non posso quindi affermare se il menù sia installabile o meno in altri modelli del passato perché non ho a disposizione il file XML per poter effettuare dei test. Posso solo dire che lo è certamente nel modello Simple del Designer Modelli e in tutti gli altri che da questo derivano .
2. Prima di tentare di inserire il menù, è bene salvare il modello e togliere eventuali altri menù che siano presenti. Non mi riferisco solo al gadget HTML/Javascript ma soprattutto agli script e ai CSS incollati nel modello sopra alla riga </head>. Tali javascript potrebbero interferire con quelli di questo menù, anzi è probabilissimo che lo facciano.
3. Nel caso che il menù non si visualizzasse correttamente anche con l'installazione dopo aver fatto pulizia menù precedenti, si può provare la seguente installazione alternativa che ha anche il pregio di poter personalizzare i colori dello stesso menù.

Andate quindi su Design > Modifica HTML e salvate il modello. Cercate la riga
]]></b:skin>
e, immediatamente sopra, incollate il seguente codice

/* MEGAMENU */
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: #FAF5DF;
font-size:12px;
z-index: 100;
color: #fff;   
font-size: 11px;   
text-align:left;   
background-color:#000;   
}
.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: #e0e0e0;
font: bold 12px;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
.megamenu .column li a{
color: #fff;   
font-size: 12px;   
text-align:left;   
background-color:#000;   
padding:3px 5px;
text-decoration:none;   
display:block;
}
.megamenu .column li a:hover{
background-color: #333;   
color:#FFF;
}
.megamenu .column li{
list-style-type: none;
}

Dove possono essere personalizzati i colori di background del menù, le dimensioni dei caratteri e altri parametri che ho evidenziato di rosso. Adesso cercate la riga </head> e, immediatamente sopra, incollate il seguente codice

<!--Megamenu Inizio-->
<script src='http://www.isoladeifamosi-2009.it/upload/jquery.min.js' type='text/javascript'/>
<script src='http://www.isoladeifamosi-2009.it/upload/jkmegamenu.js' type='text/javascript'/>
<script type='text/javascript'>
        jkmegamenu.definemenu(&quot;extanchor&quot;, &quot;extmenu&quot;, &quot;mouseover&quot;)
        jkmegamenu.definemenu(&quot;brandanchor&quot;, &quot;brandmenu&quot;, &quot;mouseover&quot;)
        jkmegamenu.definemenu(&quot;prodanchor&quot;, &quot;prodmenu&quot;, &quot;mouseover&quot;)
    </script>
<!--Megamenu Fine -http://goo.gl/zHQdM-->

Salvate il modello. Adesso create il vostro menu prendendo come base quello che ho messo in rete come esempio. Basta sostituire gli URL delle mie pagine con quelli delle vostre e cambiare le voci del menù.

Andate su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate in Sezione del sito il codice che avete preparato. Salvate e, con il mouse, posizionate il menù nella posizione più appropriata. Salvate nuovamente. Se il menù funzionerà nel vostro modello dovreste vedere un effetto di questo genere

Per l'inserimento di nuove voci o di nuove colonne o l'eliminazione di elementi e colonne sovrabbondanti vi rimando al post precedente sul Megamenù Orizzontale. Prima di creare il vostro menù che comporterà l'impiego di almeno una mezzora di tempo, se siete veloci, vi consiglio di provare a aggiungere il mio così com'è per vedere se funziona correttamente. 

• DEMO DEL MEGAMENU' -

Aggiornamento: Una versione più aggiornata di questo menù è installabile consultando l'articolo

• Menù Orizzontale a tendina a più colonne -