Come inserire un menù orizzontale a tendina in un blog.

Nella mia continua insoddisfazione del modello e delle funzionalità di questo blog mi sono trovato a sperimentare una gran quantità di widget, di personalizzazioni e, soprattutto, di menù. Partendo dal Chrome Drop Down Menù e stimolato da un commento di un lettore mi sono deciso a provare anche questo menù orizzontale a tendina che potete vedere all'opera nel mio blog di demo (solo in una pagina).
Non sto a tediarvi con particolari tecnici, ma mi limito solo a mostrare il procedimento di installazione. Andare su Layout > Modifica HTML e dopo aver salvato il modello completo cercate la riga

</head>

e, immediatamente sopra, incollate il seguente codice

<!-- Inizio Menu Chrome -->
<link href='http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome3.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome3.js' type='text/javascript'>
</script>
<noscript><a href='http://goo.gl/GnRP' target='_blank'><span style='font-size: x-small;'>Menu Orizzontale</span></a></noscript>
<!-- Fine Menu Chrome -->

quindi andate a fondo pagina e prima della riga </body>, incollate quest'altro blocco di codice

<script type='text/javascript'>
    cssdropdown.startchrome(&quot;chromemenu&quot;)
    </script>

Salvate il modello. Adesso lo script e lo stile del menù sono pronti non vi resta che personalizzarlo. Mi limito a incollare il codice che ho inserito nel mio blog con alcune considerazioni

<div id="chromemenu" class="chromestyle">
<ul>
<li><a href="http://parsifal32.blogspot.com" rel="dropmenu1">Home</a></li>
<li><a href="#" rel="dropmenu2">Risorse Blogger</a></li>
<li><a href="#" rel="dropmenu3">Widget e Menù</a></li>
<li><a href="#" rel="dropmenu4">Eros e Videochat</a></li>
<li><a href="#" rel="dropmenu5">Streaming</a></li>
<li><a href="#" rel="dropmenu6">Effetti</a></li>
<li><a href="#" rel="dropmenu7">Giochi</a></li>
<li><a href="#" rel="dropmenu8">Altro</a></li>
</ul>
</div>
<!--1st drop down menu -->                                                  
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.blogger.com/profile/03393759575661143644" target="_blank">Profilo su Blogger</a>
<a href="http://it-it.facebook.com/parsifal32" target="_blank">Aggiungimi su Facebook</a>
<a href="http://twitter.com/parsifal32" target="_blank">Aggiungimi su Twitter</a>
<a href="http://friendfeed.com/parsifal32" target="_blank">Seguimi su Friendfeed</a>
<a href="http://parsifal32.stumbleupon.com/" target="_blank">Aggiungimi su StumbleUpon</a>
<a href="http://parsifal32.tumblr.com/" target="_blank">Seguimi su Tumblr</a>
<a href="http://www.mybloglog.com/buzz/community/ideepercomputeredinternet/" target="_blank">Seguimi con MyBlogLog</a>
<a href="http://parsifal32.blogspot.com/2008/01/messaggi-dei-lettori.html">Modulo per contattarmi</a>
<a href="http://parsifal32.blogspot.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">Norme sulla Privacy</a>
</div>
<!--2nd drop down menu -->                                               
<div id="dropmenu2" style="width: 180px;" class="dropmenudiv">
<a href="http://parsifal32.blogspot.com/2008/12/come-creare-un-blog-con-pochi-click.html">Crea blog </a>
<a href="http://parsifal32.blogspot.com/2008/12/come-iniziare-un-blog-e-cosa-fare-nel.html">Che fare nel 1° mese</a>
<a href="http://parsifal32.blogspot.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">96 risorse Blogger</a>
<a href="http://parsifal32.blogspot.com/2009/07/altre-16-risorse-per-blog-su-blogger.html">99 risorse Blogger</a>
<a href="http://parsifal32.blogspot.com/2009/12/14-post-utili-migliorare-un-blog-su.html">Altri post su Blogger</a>
<a href="http://parsifal32.blogspot.com/2009/01/la-pi-grande-collezione-di-template-e.html">Collezione di modelli</a>
<a href="http://parsifal32.blogspot.com/2009/07/come-inserire-emoticon-animate.html">Guadagnare con blog</a>
<a href="http://parsifal32.blogspot.com/2009/06/tutto-quello-che-serve-sapere-per.html">Animoticon</a>
<a href="http://parsifal32.blogspot.com/2009/07/come-crearsi-una-rendita-mensile-di.html">Guadagnare 1000€ al mese</a> 
</div>
<!--3rd drop down menu -->                                                  
<div id="dropmenu3" style="width: 180px;" class="dropmenudiv">
<a href="http://parsifal32.blogspot.com/2009/04/ho-cambiato-il-codice-per-inserire-gli.html">Ultimi Articoli</a>
<a href="http://parsifal32.blogspot.com/2009/04/ho-riadattato-il-widget-degli-ultimi.html">Ultimi Commenti</a>
<a href="http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html">Widget di Benvenuto</a>
<a href="http://parsifal32.blogspot.com/2010/01/come-inserire-il-widget-degli-ultimi.html">U. A. con miniature</a>
<a href="http://parsifal32.blogspot.com/2009/12/il-fantastico-widget-dell-con-il.html">Archivio con Calendario</a>
<a href="http://parsifal32.blogspot.com/2010/01/il-widget-degli-articoli-correlati-con.html">Articoli simili con M.</a>
<a href="http://parsifal32.blogspot.com/2010/01/come-inserire-il-widget-degli-ultimi_07.html">U. A. per etichetta</a>
<a href="http://parsifal32.blogspot.com/2010/01/come-inserire-nel-blog-il-widget-degli.html">U. A per categoria</a>
<a href="http://parsifal32.blogspot.com/2010/01/come-inserire-il-widget-degli-ultimi_04.html"> U. A in verticale</a>
</div>
<!--4th drop down menu -->                                                  
<div id="dropmenu4" style="width: 180px;" class="dropmenudiv">
<a href="http://parsifal32.blogspot.com/2008/01/ecco-dove-puoi-trovare-amicizia-amore-e.html">Incontri & Eros</a>
<a href="http://videoblog32.blogspot.com/" target="_blank">Videochat Gratis</a>
<a href="http://parsifal32.blogspot.com/2008/10/ciaoamigos-la-videochat-pi-frequentata.html">Ciao Amigos</a>
<a href="http://parsifal32.blogspot.com/search/label/videochat">Le videochat di tutto il mondo</a>
</div>
<!--5th drop down menu -->                                                  
<div id="dropmenu5" style="width: 150px;" class="dropmenudiv">
<a href="http://parsifal32.blogspot.com/2009/06/motore-di-ricerca-per-film-in-straming.html">Film italiani</a>
<a href="http://film-streaming-italiano.blogspot.com/" target="_blank">Motore ricerca film</a>
<a href="http://live-streamingtv.blogspot.com/" target="_blank">TV in streaming</a>
<a href="http://parsifal32.blogspot.com/2008/09/vedere-le-partite-del-campionato.html">MyP2P per sport gratis</a>
<a href="http://parsifal32.blogspot.com/2009/03/worldlive-tv-per-vedere-gratis-partite.html">WorldLiveTv per TV P2P</a>
<a href="http://parsifal32.blogspot.com/2008/09/vedere-le-partite-del-campionato.html">Rojadirecta per calcio gratis</a>
<a href="http://parsifal32.blogspot.com/search/label/televisione">Tutto sulle televisioni</a>
</div>
<!--6th drop down menu -->                                                  
<div id="dropmenu6" style="width: 150px;" class="dropmenudiv">
<a href="http://parsifal32.blogspot.com/2008/12/effetti-neve-e-foglie-che-cadono-per-il.html">Effetto neve che cade</a>
<a href="http://parsifal32.blogspot.com/2009/01/cuoricini-animati-che-cadono-da-mettere.html">Effetto cuoricini</a>
<a href="http://parsifal32.blogspot.com/2009/07/come-ingrandire-le-immagini.html">Effetto Expando</a>
<a href="http://parsifal32.blogspot.com/2009/10/ripristinato-l-sfoglia-pagina-con-un.html">Effetto Sfoglia Pagina</a>
<a href="http://parsifal32.blogspot.com/2009/11/come-inserire-un-effetto-multicolore-ai.html">Effetto multicolore</a>
<a href="http://parsifal32.blogspot.com/2009/10/ho-caricato-su-un-altro-server-gli.html">Effetto Lightbox2</a>
<a href="http://parsifal32.blogspot.com/2009/11/effetto-lytebox-per-immagini-gallerie.html">Effetto Lytebox</a>
<a href="http://parsifal32.blogspot.com/2009/11/come-inserire-una-pagina-web-nel-blog.html">Lytebox per iFrame</a> 
</div>
<!--7th drop down menu -->                                               
<div id="dropmenu7" style="width: 150px;" class="dropmenudiv">
<a href="http://parsifal32.blogspot.com/2008/01/gioca-gratis-piu-di-dodicimila-giochi.html">12.000 Giochi gratis</a>
<a href="http://parsifal32.blogspot.com/2009/04/friv-per-giocare-gratis-online-piu-di.html">Gioca con Friv</a>
<a href="http://parsifal32.blogspot.com/search/label/giochi">Tutto sui giochi</a>
</div>
<!--8th drop down menu -->                                                  
<div id="dropmenu8" style="width: 150px;" class="dropmenudiv">
<a href="http://parsifal32.blogspot.com/2009/09/come-installare-wordpress-in-un-dominio.html">Installare Wordpress</a>
<a href="http://parsifal32.blogspot.com/search/label/wordpress">Risorse Wordpress</a>
<a href="http://parsifal32.blogspot.com/2009/11/come-funziona-google-wave-recensione.html">Google Wave</a>
<a href="http://parsifal32.blogspot.com/search/label/google%20wave">Tutto su Google Wave</a>
<a href="http://www.youtube-video-it.com/" target="_blank">I migliori video di Youtube</a>
<a href="http://parsifal32.blogspot.com/2008/01/invia-sms-gratis-in-tutta-italia.html">Invia SMS gratis</a>
</div>

Si possono costruire menù con tutte le sezioni che si vogliono, è solo un problema di spazio. Ho creato 8 voci principali che sono quelle che si vedono in grassetto nel primo blocco di codice. Se si volessero diminuire basta togliere le righe del tipo

<li><a href="#" rel="dropmenu6">Effetti</a></li>

e lasciare il numero che ci serve. Analogamente si possono inserire altre voci se si ha un modello molto largo o se si vuole mettere il menù in tutta la larghezza della pagina. In questo caso bisognerà aggiungere la riga

<li><a href="#" rel="dropmenu9">Altra voce</a></li>

con numeri progressivi (9, 10, ecc.). Contestualmente alla eliminazione o all'aggiunta di nuove righe nel primo blocco di codice dobbiamo eliminare o aggiungere il relativo codice delle voci secondarie. Queste voci sono contraddistinte da commenti del tipo

<!--7th drop down menu --> 

e si possono togliere o aggiungere mantenendo la stessa sintassi. Bisogna considerare che ciascun menù si posizionerà sotto alla voce principale a seconda del numero presente dopo dropmenu, e deve esserci una corrispondenza tra i numeri della prima parte di codice e quelli delle altre sezioni.
Si può anche personalizzare la larghezza del sottomenù di ciascuna voce principale variando i numeri evidenziati di rosso accanto a width in ciascun blocco di codice.
In alcuni link oltre al tradizionale URL è presente anche la stringa target="_blank" che serve per far aprire la pagina in un'altra scheda. E' conveniente inserirla negli indirizzi che si riferiscono a un altro sito o che comunque fanno uscire il lettore dal blog.
Nelle voci principali ho inserito solo il collegamento alla Homepage mentre ho lasciato gli altri link vuoti. Se avete l'esigenza di collegare tali voci inseritene l'URL al posto del cancelletto (#) nel primo blocco di codice.
Non vi resta quindi che sostituire i nomi delle voci e i relativi URL a questo codice che serve esclusivamente da riferimento. Fatto questo andate su Layout > Aggiungi un gadget > HTML/javascript e incollatelo in Sezioni del sito senza inserire il Titolo

Cliccate su Salva e andate su Layout > Elementi pagina dove, con il mouse, attraverso il drag & drop, posizionate il menù nel punto voluto


Andate su Salva per l'ultima volta e verificate il funzionamento dei link delle voci che avete immesso. Al passaggio del mouse si evidenzierà la tendina verticale dei link che sono stati inseriti

La voce puntata dal mouse assumerà una diversa colorazione. I più smanettoni possono ulteriormente personalizzare i colori del menù, quelli del colore di sfondo al passaggio del mouse, ecc. Devono scaricare il file chromestyle.css, aprirlo con un editor tipo Notepad++ e modificare i colori. Questo menù non è esclusivo di Blogger e può essere aggiunto anche a altre piattaforme come Splinder; l'ho testato con tutti i browser, compreso Internet Explorer e non dà problemi di sorta.

• Visita la "Vetrina di Lulu" per scaricare "Come creare il tuo primo blog con Blogger" o per vedere le anteprime delle altre pubblicazioni dello stesso autore del blog.