Menù Orizzontale per template creati con il Designer Modelli di Blogger.

Mi sono cimentato spesso nella realizzazione di menù. Ne ho presentati a soffietto, laterali estendibili, estendibili su tre lati, orizzontali e multilivello. Il concetto è stato sempre quello di caricare i file javascript e CSS in un hosting esterno. Con i nuovi modelli creati con lo strumento Designer di Blogger, alcuni di questi codici non funzionano più. Sarà mia cura nei prossimi post di trovare delle alternative per chi ha scelto questa nuova opzione.

Oggi presento un menù orizzontale che ha però caratteristiche particolari. E' stato creato utilizzando la libreria JQuery con un occhio, se non tutti e due, agli utilizzatori di Wordpress e ai siti di presentazione di prodotti e brand commerciali. Ho modificato alcune cose per adattarlo a Blogger. Ecco uno screenshot di come si presenta

Sotto le voci principali possono essere create anche due o più colonne di voci secondarie. Ho messo nel web anche la

• Demo del megamenù -

così come lo hanno chiamato i suoi autori. Ho testato questo menù sui nuovi modelli di Blogger e sui vecchi template. Mentre sui nuovi funziona egregiamente su alcuni vecchi modelli sembra non aprirsi.

Per l'installazione andate su Design > Modifica HTML e salvate il modello completo. Cliccando su F3 o su Ctrl+F cercate la riga </head> e, immediatamente sopra, incollate il seguente codice

<!--Megamenu Inizio-->
<link href='http://www.isoladeifamosi-2009.it/upload/jkmegamenu.css' rel='stylesheet' type='text/css'/>
<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 - www.ideepercomputeredinternet.com-->

Ci sono da fare alcune precisazioni. Ho provato a caricare i file javascript su Google Sites ma il menù non funzionava. Ho tentato con altri hosting ma con lo stesso risultato. Allora ho provato, con successo, a caricarli su un sito che praticamente non utilizzo più, che è hostato su Tophost. Ha il nome di un celebre reality televisivo con l'unico anno in cui non è andato in onda . Questo la dice lunga sulla mia conoscenza dei palinsesti TV… Probabilmente questi script hanno bisogno di essere caricati su un database MySQL.

Dopo aver salvato il modello è il momento di creare il menù inserendo le voci principali e secondarie che preferite. Ho messo in rete un esempio di codice di megamenù. Spiego brevemente alcuni concetti del suo funzionamento. Visto che è stato creato per siti commerciali ci sono le classi extmenu, brandmenu e prodmenu, quello però che interessa maggiormente è che per creare una nuova colonna, sotto una voce principale, bisogna inserire

<div class="column"><ul>   all'inizio e </ul></div> alla fine.

Ciascun elemento del menù inizierà con il tag <li> e terminerà con quello </li>. Ho inserito il tag title in alcune voci. Questo comporta la visualizzazione della scritta del title se si punta con il mouse. Esempio title="Guarda tutti i post con Plugin".

Per inserire i vostri link sarà sufficiente sostituire i miei e il nome della voce relativa. Si possono eliminare voci o aggiungerne altre a piacimento come del resto si possono aggiungere o togliere delle colonne. Ho inserito il tag target="_blank" per le pagine esterne al blog in modo tale che vengano aperte in un'altra scheda.

Quando avrete preparato il file di testo del menù, andate su Design > Aggiungi un gadget > HTML/Javascript e incollatelo in Sezioni del sito senza mettere il titolo. Salvate e posizionatelo con il mouse sotto all'header del blog

Il menù acquisirà alcuni colori del blog in cui è stato inserito. Ecco un altro esempio del menù in un sito con una colorazione molto diversa

Si possono però personalizzare totalmente aspetto e dimensioni del menù. Il file CSS che gestisce lo stile può infatti essere anche caricato su Google Sites con funzionamento immutato. Coloro che volessero adattare il menù al proprio blog devono aprire questo file, selezionarlo, copiarlo e salvarlo col nome jkmegamenu.css. Va quindi aperto con Notepad++ o programma analogo. Si possono cambiare il colore di sfondo del menù, la dimensione dei caratteri, la larghezza delle colonne, il colore che assume la voce quando viene puntata con il mouse, ecc.

Il file così modificato, si salva e si carica su Google Sites o altro hosting che supporta i CSS (MyDataNest per esempio). Dopo averne acquisito l'URL ,questo dovrà quindi essere sostituito nel codice al posto di http://www.isoladeifamosi-2009.it/upload/jkmegamenu.css.

Il menù funziona perfettamente con Chrome e con Firefox oltre che con Internet Explorer, in quest'ultimo caso è solo un po' più lento ad aprire le voci secondarie. Mi è stato segnalato dall'autrice di Make-Up Your Mind, Girl!

Aggiornamento: Una versione maggiormente personalizzabile di questo menù è installabile consultando l'articolo sul Drop Down Menù Orizzontale per Blogger .

Fonte | JkMegamenù -