Pubblicato il 23/11/10 - aggiornato il  | 22 commenti :

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
menù-megamenù
Sotto le voci principali possono essere create anche due o più colonne di voci secondarie. Ho messo nel web anche la
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 A bocca aperta. 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
megamenu
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
megamenù-chiaro
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ù -


22 commenti :

  1. se funzionerà sul mio blog dove non funziona nessun menu... mi offro in moglie :D kiss

    RispondiElimina
  2. come non detto non va, ma non è colpa tua... artister mi trasforma ogni menu orizzontale come quelli che vedi al lato del mio blog... non so xchè, ma pazienza. Grazie mille comunque :*

    RispondiElimina
  3. @Soffio Di Dea
    Vorrà dire che rimarrò celibe :D

    RispondiElimina
  4. però c'è una possibilità :D se mi spieghi come allargare il template blogger oltre i 1000 px previsti... magari ... :P

    RispondiElimina
  5. Possibilità di matrimonio? ahahah
    Guarda che non conviene andare oltre i 950-1000 pixel perché devi pensare che non tutti hanno uno schermo panoramico a 24 pollici, anzi la tendenza è nell'aumento delle visite dagli smartphone quindi sarà il caso semmai di ridurre la larghezza.

    RispondiElimina
  6. Sei un grande!

    Era un po' che volevo mettere un menù orizzontale come il tuo ...

    In settimana ci provo!

    RispondiElimina
  7. sì quella spiegazione potrebbe essere davvero portatrice di proposte di matrimonio... ma questa già aiuta molto eh

    RispondiElimina
  8. Vedo che questo menù oltre a suscitare l'interesse dei lettori (e delle lettrici) ha innescato un dibattito sul matrimonio :D

    RispondiElimina
  9. Be' io non ti sposo perché te l'ho richiesto, ma sul mio Minima non funziona, uffa! xD

    RispondiElimina
  10. Risolto! Grazie mille per l'articolo Ernesto!:D

    RispondiElimina
  11. che bell'articolo....come del resto tutto qui e' molto utile....pensa che devo studiarmele un po' queste cose...beato te che sei cosi' bravo!!
    appena ho un po' di tempo ci provero'.
    ciao e buona giornata :)

    RispondiElimina
  12. ciao, ottimo post! ma come si fa a modificare colore, grandezza ecc.. del menu??

    RispondiElimina
  13. @ancorastar
    Leggi questo articolo di aggiornamento
    http://www.ideepercomputeredinternet.com/2010/11/megamenu-alternative-per-l-nei-diversi.html
    Non sono molte però le cose che si possono modificare.
    Devi agire sul file CSS
    Ciao

    RispondiElimina
  14. ok grazie 1000, però io ho provato a cambiare colore con i codici che utlizza blogger nel nuovo modello, però non cambia! :(

    RispondiElimina
  15. @ancorastar
    devi cambiare i codici dei colori, per esempio questi
    #FAF5DF;
    #000;
    #e0e0e0;
    Se non sai cosa sono i codicei dei colori leggiti questo post
    http://www.ideepercomputeredinternet.com/2008/12/come-conoscere-il-codice-numerico-dei.html
    e ricordati che quando ci sono tre caratteri invece di sei significa che gli altri sono uguali cioè
    #000;
    è come
    #000000;

    RispondiElimina
  16. ho un problema XD vorrei creare una categoria dove scendando le varie etichette ma non mi riesce XD ho provato a grdare le guide ecc ma se copio x es il codice mi appare uguale ma se ci vado sopra non scende niente invece se vado sopra quello che ho copiato si xD come faccio?

    RispondiElimina
  17. @ProfumiEBalocchi
    I menù che ho creato puoi trovarli qui
    http://www.ideepercomputeredinternet.com/search/label/menu
    La tua domanda non ho capito a cosa si riferisca, a questo menù? Se è così non è che può essere molto personalizzato :(

    RispondiElimina
  18. si riferisce al fatto che vorrei aggiungere una voce al menu questo XD e qui ci sono i riferimenti per farlo mi sembra ma nn riesco XD tipo aggiungere una voce esempio ciao che quando vado sopra mi scendono le categorie tipo : saluti,blabla ... ecc xD e io riesco solo a farne una fissa cioe senza far venire giu nnt XD come faccio? perche magari mi blocca qlks i codici ma nn so, si è capito ora?

    RispondiElimina
  19. @ProfumiEBalocchi
    Il tutorial è questo. Le modifiche che si possono fare sono quelle indicate. Se poi nel tuo blog non vengono recepite correttamente, mi spiace :(

    RispondiElimina
  20. Grazie mille per questa guida..
    Purtroppo una difficoltà.
    Le prime tre voci, hanno la colonnina che si apre perfettamente, e noto che prima di ogni colonna ci sono i seguenti nomi: extmenu, brandmenu e prodmenu.

    Se volessi creare la colonna anche per la quarta e quinta voce, che nome dovrei inserire??
    Con il copia e incolla degli altri non funziona =(
    In attesa di risposta,
    grazie ancora!!

    RispondiElimina
  21. @Andrea
    Ci ho provato anch'io ma non ci sono riuscito. Si tratta di un menù che ho adattato da Wordpress e che funziona solo parzialmente.

    RispondiElimina
  22. @Andrea

    Devi creare una voce nuova con il nome del tuo menu !!

    Per info contattami

    www.marketmovers.it

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy