Come creare Chrome Drop Down Menù, un menù orizzontale a discesa per blog su Blogger che funziona con tutti i browser.

Chrome Drop Down Menà multilivello per Blogger.

Questo menù mi è stato segnalato da un lettore; in genere non posso soddisfare le richieste di questo tipo perché non ho il tempo materiale per farlo ma in questo caso ho fatto un'eccezione perché la realizzazione di questo menù mi sembra possa interessare anche altri frequentatori di questo blog.
Mi sono già addentrato nella creazione di menù usando gli script di Dynamic Drive ma anche attraverso il semplice HTML, alcuni esempi sono

     1) Menù laterale scorrevole
     2) Menù verticale a tendina
     3) Menù espandibile
     4) Tre Menù scorrevoli

Il menù illustrato in questo articolo viene creato basandoci sul menù Chrome di Dynamic Drive e sono presenti quattro versioni diverse a seconda che si scelga la posizione di centro con tema grigio, quella di sinistra con tema rosso, quella centrale con tema blu o quella sulla destra con tema verde. Come è mia abitudine ho creato un blog demo per visualizzare questo menù.

Mi muoverò su due versanti: il primo è quello di dare tutte le indicazioni di personalizzazione per i lettori più smanettoni ed il secondo è quello di crearne uno specifico che possa essere installato senza grossi problemi.

Nel caso di utenti che amano crearsi i widget con le proprie mani scaricare questo file zip. Scompattarlo con Zip Genius o altro programma analogo. Al suo interno si trovano due cartelle e due file: cartella chromejs, cartella chrometheme, file demo.htm, file down.gif.

Nella cartella chromejs c'è un solo file denominato chrome.js, quindi del tipo Javascript, mentre nella cartella chrometheme ci sono quattro file chromestyle.css insieme a otto file immagine, due per ogni file css. I file sono numerati e possono essere scelti a seconda delle quattro opzioni di cui ho parlato in precedenza.

Il file demo.htm rimanda ad una pagina web in cui è presente la demo del menù mentre l'immagine del file down.gif rappresenta una freccia che deve essere caricata su un hosting. Io l'ho caricata su Skydrive esattamente qui.

Adesso dobbiamo aprire il file chrome.js e, per farlo, occorre rinominarlo in chrome.txt. Quindi sostituiamo down.gif, presente nel codice, con l'indirizzo dell'immagine che abbiamo caricato



Dopo l'inserimento dell'URL, occorre rinominare nuovamente il file come chrome.js e caricarlo su un hosting che supporti gli script come MyDataNest. 


Adesso dobbiamo scegliere quale dei quattro menù utilizzare. Per provare ho scelto il secondo che è supportato dal file di stile chromestyle2.css e dalle due immagini chromebg2.gif e chromebg2-over.gif.
Dobbiamo caricare le due immagini scelte in un hosting. I collegamenti ai file precedenti sono quelli delle immagini caricate. Dobbiamo aprire il file chromestyle2.css rinominandolo in chromestyke2.txt, come fatto in precedenza, oppure si può usare anche un programma tipo FrontPage. Nel file di testo vanno inseriti gli URL delle due immagini appena caricate; si possono anche personalizzare i colori come meglio crediamo. Non mi dilungo troppo su questo tema ma si possono cambiare per esempio i codici dei colori, i bordi, ecc.
Le porzioni di codice in cui intervenire per personalizzazioni sono contrassegnate dal seguente commento

/*THEME CHANGE HERE*/

Terminate le personalizzazioni dobbiamo rinominare il file come chromestyle2.css e caricarlo nel web in un hosting che supporti questo tipo di file. Coloro che non volessero smanettare troppo possono trovare il file nel link precedente.
Adesso passiamo ad intervenire sul template del blog quindi per prima cosa salviamo il modello completo. Andiamo quindi su Layout > Modifica HTML e cerchiamo la riga </head>; immediatamente sopra incolliamo il seguente codice

<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'>
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Si può incollare il codice così come è, per gli utenti più pigri, oppure si possono sostituire gli URL in rosso con quelli dei file personalizzati che si sono caricati su un nostro hosting. Il file chrome2.js è praticamente senza personalizzazione perché ha solo l'immagine della freccia verticale mentre chromestyle2.css è quello che determina l'aspetto del menù. Ecco lo screenshot dell'inserimento



Adesso andate in fondo al modello e subito prima di </body> inserite quest'altro codice

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

Salvate il template.
Definito gli stili del menù possiamo passare alla sua creazione vera e propria. Un codice di un menù potrebbe essere simile al seguente

<div id="chromemenu" class="chromestyle">
<ul>
<li><a href="http://www.ideepercomputeredinternet.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Dove Trovarmi</a></li>
<li><a href="#" rel="dropmenu2">Risorse Blogger</a></li>
<li><a href="#" rel="dropmenu3">Risorse esterne</a></li>
</ul>
</div>
<!--1st drop down menu -->                                                  
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.blogger.com/profile/03393759575661143644" target="_blank">Profilo Blogger</a>
<a href="http://it-it.facebook.com/parsifal32" target="_blank">Facebook</a>
<a href="http://twitter.com/parsifal32" target="_blank">Twitter</a>
<a href="http://www.youtube.com/parsifal32/" target="_blank">Youtube</a>
<a href="http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">Privacy</a>
</div>
<!--2nd drop down menu -->                                               
<div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
<a href="http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html">Crea blog</a>
<a href="http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">101 risorse Blogger</a>
<a href="http:/www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html">Guadagnare con blog</a>
</div>
<!--3rd drop down menu -->                                                  
<div id="dropmenu3" style="width: 150px;" class="dropmenudiv">
<a href="http://videoblog32.blogspot.com/" target="_blank">Videochat</a>
<a href="http://www.youtube-video-it.com/" target="_blank">Video Youtube</a>
<a href="http://film-streaming-italiano.blogspot.com/" target="_blank">Film streaming</a>
<a href="http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html" target="_blank">Calcio gratis</a>
</div>

dove la personalizzazione riguarda l'inserimento dell'attributo target="_blank" se si vuole che la pagina venga aperta in un'altra scheda. Al posto degli URL in rosso vanno inseriti gli URL dei nostri collegamenti mentre alle voci scritte in verde vanno sostituite le vostre. All'inizio del codice ci sono tre collegamenti contrassegnati dal cancelletto # e da rel="dropmenux" . Si possono lasciare vuoti così come sono oppure aggiungere dei collegamenti a delle sezioni particolari del nostro blog.
Questo codice va inserito in un elemento HTML/Javascript andando su Layout > Elementi pagina > Aggiungi un gadget. Successivamente con il mouse va posizionato subito sotto l'intestazione



Per ciascuno dei tre menù è possibile aggiungere tutte le voci che vogliamo semplicemente aggiungendo delle nuove righe con la stessa sintassi.
Per vedere all'opera questo menù andate nel blog Demo del Menù orizzontale.
Questo menù è stato testato ed è perfettamente funzionante con Firefox, Chrome, Internet Explorer e Opera.
Aggiornamento importante: E' meglio evitare di usare MyDataNext e scegliere il più affidabile DropBox o addirittura Google Sites per chi non possiede un dominio personalizzato