Pubblicato il 25/10/09 - aggiornato il  | 17 commenti :

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

image

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

modello_screenshot

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

menù_drag-and-drop

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




17 commenti :

  1. grazie veramente per quello che fai.
    da qualche mese ho aperto un blog e leggendoti sto cercando di migliorarlo.

    ciao e continua così.

    RispondiElimina
  2. ottimo post ^^

    veramente utile ^^

    è similissimo al mio questo menu ^^

    ma ora mi chiedo una cosa... c'è possibilità di fare questo menu a "discesa"?

    mi spiego meglio... quando passiamo sopra a una voce del menu scende un elenco di "link"

    in questo modo è possibile facilitare ulteriormente la navigazione di un blog ^^

    GRAZIE ANCORA PER I TUO POST OSEREI DIRE SEMPRE ILLUMINANTI =)

    RispondiElimina
  3. Ciao Parsifal e grazie mille per la guida.

    L'ho subito implementato su VideoItaliano http://www.videoitaliano.org/ ma i menù mi compaiono sempre a sinistra e non allineati sotto la rispettiva voce.

    Ti premetto che ho utilizzato il css e i link messi a disposizione da te, non ho scaricato il file zip.

    Come posso fare per allineare centralmente i sottomenù? Mi puoi dare una mano?

    RispondiElimina
  4. @Massimiliano Badolati
    Hai aggiunto più voci principali rispetto alle 4 previste (Home più altre tre). Questo menù è stato strutturato in quel modo ed è difficile aggiungere nuove voci in orizzontale mentre in verticale puoi metterne quante ti pare.
    Forse si potrebbe anche fare ma bisognerebbe provare a modificare lo script. Può essere anche che ci sia una qualche incompatibilità con la toolbar di Wibiya.
    Ciao

    RispondiElimina
  5. AGGIORNAMENTO

    Ho scritto un nuovo articolo sull'installazione di questo menù con la possibilità di aggiungere più voci principali
    Menù Orizzontale a tendina.

    RispondiElimina
  6. ti ringrazio parsifal ma anchio ho lo stesso problema di massimiliano .. ora provero il menu orrizzontale a tendina da te descritto il questo commento

    RispondiElimina
  7. Ciao Parsifal, ho fatto delle prove. Diciamo che vorrei fare dei cambiamenti perché nessuno dei 4 fa al caso mio, ma in ogni caso come faccio a togliere la freccia? Se non ho capito male è il file js a determinarla, ma togliendo quello script non mi si chiude il modello.
    Cosa faccio? Grazie. :)

    RispondiElimina
  8. Ciao Parsifal intanto complimento per l'ottimo sito e per tutte le risorse che mi stanno aiutando nella creazione del mio blog!
    Ho provato a fare un menu seguendo le tue istruzioni solo che ho un risultato un pò inaspettato:
    http://cheapadvices.blogspot.com
    Ora ho tolto i dropmenu perchè ho ancora poche sottocategorie solo che non riesco a vedere lo sfondo e non riesco a personalizzare la grandezza del font.
    Mi potresti dare una mano ?
    Grazie in anticipo e ancora complimenti!!!

    RispondiElimina
  9. @cheapadvices
    Cerco nei limiti del possibile di aiutare tutti coloro che me lo chiedono. Ma devono essere dei quesiti specifici.
    Ho illustrato nel post tutto il procedimento. Se tu dice di averlo seguito alla lettera c'è solo l'opzione che il tuo modello non sia compatibile. E' cosa purtroppo molto comune.
    Prova a seguire quest'altro tutorial che si riferisce sempre allo stesso menù
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-un-menu-orizzontale.html
    All'inizio prova a inserire i miei file per vedere se c'è compatibilità e poi pensa alle personalizzazioni.
    Ciao

    RispondiElimina
  10. Ciao ma non si può avere una guida che indichi come fare un menu esattamente come quello di questo blog?
    Grazie mille di tutto caro parsifal32!

    RispondiElimina
  11. @Corvo Michele
    Guarda che questo menù è esattamente come il mio. Forse varia il colore, non mi ricordo bene. A breve posterò un tutorial per creare un menù anche con gli stessi colori di quello di questo blog.
    Ciao

    RispondiElimina
  12. @parsifal32
    grande! se mi assicuri che viene lo della stessa tipologia, bene! anzi. il massimo, perchè volevo metterlo nero. grazie ancora
    buon lavoro

    RispondiElimina
  13. @Corvo Michele
    Il post l'ho già scritto, è qui
    http://www.ideepercomputeredinternet.com/2011/01/come-inserire-un-menu-orizzontale-drop.html

    RispondiElimina
  14. Utilissimo come sempre! Ho seguito tutte le istruzioni alla perfezione, mi viene visualizzato il menù ma quando passo sopra le voci non scende il menù a tendina? Come mai?

    RispondiElimina
  15. @Nerko
    Significa che il javascript che sovrintende all'effetto scorrimento non funziona nel tuo modello.

    RispondiElimina
  16. Ho provato il menu pero ce qualcosa che non va si il sotto menu si apre lontano in basso del pagina di bara de menu cosa si po fare ?

    RispondiElimina
    Risposte
    1. @colorbis@yahoo.it
      Il tuo inconveniente è purtroppo comune a molti su Blogger. Allo stato c'è poco da fare e non rimane che cercare un altro menù più compatibile.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.