Pubblicato il 24/11/10 - aggiornato il  | 36 commenti :

Megamenù: alternative per l'installazione nei diversi modelli di Blogger.

Il Megamenù orizzontale che ho presentato ieri ha avuto un discreto riscontro tra i lettori. C'è chi lo ha installato senza problemi e chi invece non è riuscito nel compito perché ha un blog con un modello vecchio. Credo sia opportuno fare delle precisazioni per aiutare più persone possibili che siano interessate a inserirlo nel template.
  1. Ho testato il menù solo su alcuni nuovi modelli e su un vecchio template che ho in Bacheca per fare dei test. Si tratta del modello Tekka. Non posso quindi affermare se il menù sia installabile o meno in altri modelli del passato perché non ho a disposizione il file XML per poter effettuare dei test. Posso solo dire che lo è certamente nel modello Simple del Designer Modelli e in tutti gli altri che da questo derivano .
  2. Prima di tentare di inserire il menù, è bene salvare il modello e togliere eventuali altri menù che siano presenti. Non mi riferisco solo al gadget HTML/Javascript ma soprattutto agli script e ai CSS incollati nel modello sopra alla riga </head>. Tali javascript potrebbero interferire con quelli di questo menù, anzi è probabilissimo che lo facciano.
  3. Nel caso che il menù non si visualizzasse correttamente anche con l'installazione dopo aver fatto pulizia menù precedenti, si può provare la seguente installazione alternativa che ha anche il pregio di poter personalizzare i colori dello stesso menù.
Andate quindi su Design > Modifica HTML e salvate il modello. Cercate la riga
]]></b:skin>
e, immediatamente sopra, incollate il seguente codice
/* MEGAMENU */
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: #FAF5DF;
font-size:12px;
z-index: 100;
color: #fff;   
font-size: 11px;   
text-align:left;   
background-color:#000;   
}
.megamenu .column{
float: left;
width: 175px; /*larghezza di ciascuna colonna del menu */
}
.megamenu .column ul{
margin: 0;
padding: 10px;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 0px;
}
.megamenu .column h3{
background: #e0e0e0;
font: bold 12px;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
.megamenu .column li a{
color: #fff;   
font-size: 12px;   
text-align:left;   
background-color:#000;   
padding:3px 5px;
text-decoration:none;   
display:block;
}
.megamenu .column li a:hover{
background-color: #333;   
color:#FFF;
}
.megamenu .column li{
list-style-type: none;
}
Dove possono essere personalizzati i colori di background del menù, le dimensioni dei caratteri e altri parametri che ho evidenziato di rosso. Adesso cercate la riga </head> e, immediatamente sopra, incollate il seguente codice
<!--Megamenu Inizio-->
<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 -http://goo.gl/zHQdM-->
Salvate il modello. Adesso create il vostro menu prendendo come base quello che ho messo in rete come esempio. Basta sostituire gli URL delle mie pagine con quelli delle vostre e cambiare le voci del menù.
Andate su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate in Sezione del sito il codice che avete preparato. Salvate e, con il mouse, posizionate il menù nella posizione più appropriata. Salvate nuovamente. Se il menù funzionerà nel vostro modello dovreste vedere un effetto di questo genere
megamenù-screenshot
Per l'inserimento di nuove voci o di nuove colonne o l'eliminazione di elementi e colonne sovrabbondanti vi rimando al post precedente sul Megamenù Orizzontale. Prima di creare il vostro menù che comporterà l'impiego di almeno una mezzora di tempo, se siete veloci, vi consiglio di provare a aggiungere il mio così com'è per vedere se funziona correttamente. 
Aggiornamento: Una versione più aggiornata di questo menù è installabile consultando l'articolo




36 commenti :

  1. domanda: è possibile avere delle sottovoci legate alle voci secondarie?

    RispondiElimina
  2. @Soffio di Dea
    Ho preso questo menù in blocco, così com'era. Non è come il menù multilivello in cui si possono aggiungere vari livelli. Qui sono solo due, al massimo possiamo aggiungere più colonne sotto una singola voce principale

    RispondiElimina
  3. Capito sarà utile comunque in futuro quando avrò più voci, grazie mille :*

    RispondiElimina
  4. Nonostante modifichi i parametri nel codice html relativi al colore e alla grandezza dei menù, non mi visualizza le modifiche!

    Le uniche modifiche che mi visualizza sono quelle del menù a tendina (ho cambiato la grandezza dei caratteri, e il colore da rosso a arancione) ma per quanto riguarda il colore di sfondo del menù che io imposto su nero, me lo dà trasparente. Idem per la grandezza dei caratteri...

    Potresti darmi una mano? grazie!

    RispondiElimina
  5. edit: risolto dal template designer :)

    RispondiElimina
  6. Alla fine ho approcciato questo menu!!
    inizialmente mi dava problemi, quindi ho provato ad inserire le stinghe nel codice eliminando prima quelle che avevo inserito in precedenza per eliminare la navbar e per centrare il titolo del post, che ho reinserito successivamente= tutto OK.

    Thanks

    RispondiElimina
  7. Ernesto ti ho mai detto che ti adoro? ^_-

    RispondiElimina
  8. @Astasia
    Sì me lo hai già detto ma fa sempre piacere risentirlo :D

    RispondiElimina
  9. è possibile creare vari sottomenù con questo tipo di script?

    RispondiElimina
  10. @Nerko
    Si possono creare tre sottomenù
    http://www.ideepercomputeredinternet.com/2010/11/menu-orizzontale-per-template-creati.html

    RispondiElimina
  11. Nel link che mi hai dato non c'è scritto come fare, forse non mi sono espresso bene!
    Se io creo una voce del menù che si chiama "Film", se ci passi sopra col mouse si apre la tendina con il sottomenù "titoli film", se io vorrei creare un eventuale sottomenù di "titoli film" contenente appunto i titoli dei film, con il megamenù in questione lo posso fare?

    RispondiElimina
  12. @Nerko
    Si può creare solo un livello di sottomenù

    RispondiElimina
  13. Ah ok quindi col megamenù non si possono creare dei sottomenù dei sottomenù, dovrò cambiare proprio tipo di menù allora...grazie per le info :)

    RispondiElimina
  14. @parsifal32
    ciao non si può nelle modifiche, avvicinare la riga che sta sopra il menu e sotto? meglio che guardi cosa mi è venuto fuori:
    http://filmitaliamegaupload.blogspot.com/

    vorrei sapere se si può modificare in modo che la riga bianca che sta sopra la home e i generi, sia ugualmente distante dalla riga sottostante alla home e ai generi!

    RispondiElimina
  15. @parsifal32
    scusa adesso ho aggiunto una scritta in HTML al di sopra del menu e quella riga di cui ti parlavo è finita sopra quella nuova scritta di cui di parlavo. a sto punto mi sapresti consigliare un modo per rendere più quadrettato e omogeneo il menu. Ovvero in modo che siano separate bene la scritta home e genere; oppure che sia riquadrati. veramente non so come ringraziarti! ciao carissimo :)

    RispondiElimina
  16. @Corvo Michele Questo menù è stato preso pari pari da Wordpress e non si può fare nulla.

    RispondiElimina
  17. Ho scoperto che il menù a tendina non funziona più...io non ho toccato niente!! Come mai?

    RispondiElimina
  18. @Nerko
    La Demo funziona ancora quindi non è un problema del codice. Onestamente non saprei dirti...

    RispondiElimina
  19. @Ernesto T.

    Ah ok grazie lo stesso! Sto provando a rimetterlo, se non dovesse funzionare ne cercherò un altro :(

    RispondiElimina
  20. @Nerko

    Ho scoperto che non funziona perchè ho messo meno di 7 voci nel menù, può essere una causa? se ne metto 7 funziona benissimo...

    RispondiElimina
  21. @Nerko E' un menù per Wordpress che ho adattato a Blogger. Purtroppo si possono fare pochissime modifiche.

    RispondiElimina
  22. @Ernesto T.

    Ah ok ;) Comunque penso di aver risolto ma non ho la minima idea di come ho fatto...!

    RispondiElimina
  23. Ciao,posso inserire il menù sopra all'header e non sotto?

    RispondiElimina
  24. @Petra
    Se riesci a trascinarcelo con il mouse, certamente. Se non ce la fai puoi seguire questo tutorial
    http://www.ideepercomputeredinternet.com/2011/01/come-visualizzare-aggiungi-un-gadget-in.html

    RispondiElimina
  25. Ciao, sto trovando grande difficolà nella creazione di questo menù, quando vado a modificare il tuo codice inserendo le voci che interessano a me il risultato è diverso dal tuo...non mi vengono più fuori le voci secondarie

    RispondiElimina
  26. @Crazylully
    Si tratta di un menù per Wordpress e purtroppo non sono riuscito a adattarlo completamente a Blogger. Anch'io ho avuto serie difficoltà nella personalizzazione.

    RispondiElimina
  27. Come posso fare per creare un menù semplice tipo quello di soffio di dea?

    RispondiElimina
  28. @crazylully
    Soffio Di Dea ha usato questo mio tutorial
    http://www.ideepercomputeredinternet.com/2011/03/menu-orizzontale-popup-con-immagini-per.html
    Però poi è stata la sua abilità grafica a creare le immagini da inserire nel suo modello. La procedura è quella del post in cui ho fatto un esempio di immagini riguardanti la musica ma la grafica devi essere tu a sceglierla.

    RispondiElimina
  29. sono riuscita a modificare il codice però arrivata alla 4 "colonna" non mi si apre più il sottomenù

    RispondiElimina
  30. @Crazylully
    I sottomenù si aprono stranamente solo nelle prime tre colonne. E' una cosa che avevo già affrontato in commenti precedenti.

    RispondiElimina
  31. è ovvio che dopo il terzo non ne apre se non li definite nel javascript... di defalut ne sono definiti 3, gli altri dovete aggiungerli voi...
    Saluti,
    www.marketmovers.it

    jkmegamenu.definemenu("extanchor", "extmenu", "mouseover")

    RispondiElimina
  32. Sono riuscita a configurare il menù con i campi che servono a me, ma non mi permette di cambiare il colore del menù principale.? Ho potuto modificare il sottomenù ma non il menù principale nè nel colore nè nella grandezza. come mai?

    RispondiElimina
    Risposte
    1. @ Federica
      Dipende dai CSS del menù delle pagine statiche che vengono recepiti anche da questo menù (penso ..)

      Elimina
  33. Come hai inserito in menu le etichette come fare inserirli in automatico come possibile.
    La seconda domanda e : se penso di inserire solo un può non tutti come fare.
    La terza domanda e : come inserire in menu le etichette con miniature e titoli dei post e possibile .
    Grazie mille .

    RispondiElimina
    Risposte
    1. Ma tu usi il traduttore automatico per fare le domande perché non si capisce nulla? Cercherò di usare la fantasia cercando di estrapolare quello che intendevi dire
      1) L'articolo con questo menù più recente è qui
      http://www.ideepercomputeredinternet.com/2011/09/menu-orizzontale-drop-down-per-template.html
      quindi ti conviene consusltare questo post
      2) Si possono mettere le etichette nei post basta trovarne l'URL come questo esempio
      http://www.ideepercomputeredinternet.com/search/label/blogger
      3) In genere nei menù risulta visibile solo il testo e quasi mai le immagini con miniature. Ci sono anche eccezioni cone questo
      http://www.ideepercomputeredinternet.com/2012/08/megamenu-css3-dropdown-blogger.html

      @#

      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.