Megamenù orizzontale Drop Down per template del Designer Modelli di Blogger.

Come installare il megamenù orizzontale su Blogger

Mi accingo a presentare un menù che sono sicuro incontrerà il favore di molti utenti di Blogger che hanno un template del nuovo Designer Modelli e che non riescono a trovare strumenti di navigazione compatibili. Questo non significa che sia installabile in tutti i blog ma ci sono buone possibilità che lo sia in quelli con i modelli più recenti. Ho trovato invece qualche difficoltà nella sua installazione in template più datati.

Gli script di questo menù hanno difficoltà a funzionare se vengono caricati su Google Sites mediante l'opzione Schedario, sarà quindi necessario caricarli sul vostro account DropBox. Quando deciderò di cambiare il modello di questo blog, che ormai ha tre anni e mezzo, penso proprio che proverò a installare questo menù perché il numero dei collegamenti che possono essere inseriti sono veramente tantissimi. Ho postato in rete una

• Demo del Megamenù orizzontale a più colonne -

I colori possono essere personalizzati e resi compatibili con quelli del nostro sito. Si può sempre variare il colore di sfondo delle voci principali andando su Design > Designer Modelli > Avanzato > Sfondo schede, mentre per modificare il colore del testo si va su Testo Schede

Per l'installazione di questo menù bisogna scaricare questo file ZIP cliccando su Download Megamenù e scompattarlo con ZIP Genius o 7-ZIP. Si otterranno due file denominati  jquery.min.js e jkmegamenu.js. Se avete Windows 7 non vedrete le estensioni javascript dei due file. Questi vanno caricati nella cartella Public di DropBox e poi si dovrà acquisire il loro link diretto cliccandoci sopra con il destro del mouse

e andando su DropBox > Copy Public link. Adesso andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Cercate la riga </body> che si trova quasi in fondo al modello e incollate questo codice

<!--Megamenu Inizio-->
<script src='jquery.min.js' type='text/javascript'/>
<script src='jkmegamenu.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/ypw07' target='_blank'><span style='font-size: x-small;'>Megamenu</span></a></noscript>
<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 -->

Dove al posto di 'jquery.min.js' e 'jkmegamenu.js' dovrete inserire i loro URL diretti ottenuti da DropBox. L'evento mouseover indica che il menù si aprirà al passaggio del mouse. Si può sostituire mouseover con click per farlo aprire solo quando si effettua un click. La Voce 8 della Demo online ha questa particolarità e il suo menù verticale si dispiega solo se ci si clicca sopra. L'evento click non è invece presente nel codice che ho appena postato.

Come vedete il menù ha otto voci principali che possono essere modificate aggiungendo o togliendo una riga con la stessa sintassi

jkmegamenu.definemenu(&quot;elementoX&quot;, &quot;menuX&quot;, &quot;mouseover&quot;)

Cercate adesso la riga  ]]></b:skin> e, immediatamente sopra, incollate questo CSS

/* 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;   
}
.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;
}

Salvate il modello. Si tratta dei fogli di stile che determinano l'aspetto del menù. Ho evidenziato con un colore rosso i parametri più importanti che possono essere modificati. Ne faccio un breve elenco

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

Non rimane che creare il menù vero e proprio con i collegamenti ai nostri post, alle nostre etichette o anche a pagine esterne al blog. In ciascuna voce possono essere inserite più colonne di voci secondarie. Ciascuna colonna ha questa struttura di HTML

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

dove ogni elemento dell'elenco avrà invece questo codice di base

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

dove al posto di INDIRIZZO_POST va inserito l'URL della pagina da linkare, in title va messa l'espressione che si vuole visualizzare quando si passa sopra al link con il mouse e TITOLO POST è quello che si vede materialmente nel menù. Per facilitarvi la realizzazione del vostro menù ho pubblicato una

• Demo del codice del Megamenù -

La seconda voce ha quattro colonne, la terza ha due colonne mentre le altre ne hanno una soltanto. Questa distribuzione può anche essere rivista in altro modo. Ricordo che la Voce 8, a titolo di esempio, si apre solo mediante un click. Se volete vedere una demo in cui anche la Voce 8 si apra passandoci sopra il mouse, andate qui. Dove vedete che al posto degli URL ci sono dei cancelletti come questo ( # ) è possibile inserire un ulteriore collegamento. Quando sarete riusciti a creare il codice del vostro menù, andate su Design > Aggiungi un gadget > HTML/Javascript e incollatelo in Sezioni del sito. Salvate, posizionate l'elemento con il mouse e salvate di nuovo. Ricordo che il numero delle voci del menù devono corrispondere al numero di blocchi di codice inseriti in questo HTML altrimenti il menù non funzionerà. In altri termini se volete togliere una voce perché otto sono troppe, dovete anche togliere una riga al primo codice.

Prima di mettervi a creare il vostro menù vi consiglio di provare a vedere se vi funziona il mio codice per evitare un lavoro che potrebbe rivelarsi inutile. Vi ricordo di caricare i javascript su DropBox e di inserire gli URL nel codice altrimenti ovviamente il menù non funzionerà. Non vi posso dare gli URL dei file che ho caricato io  perché molte installazioni mi esaurirebbero la banda che ho a disposizione su DropBox. Il menù è correttamente funzionante con i principali browser quali IE8, IE9, Chrome e Firefox.

Fonte | JkMegamenù -