02 settembre 2011

Megamenù orizzontale Drop Down per template del Designer Modelli di Blogger.

Mi accingo a presentare un menù che sono sicuro incontrerà il favore di molti utenti di Blogger che hanno un template del nuovo Designer Modelli e che non riescono a trovare strumenti di navigazione compatibili. Questo non significa che sia installabile in tutti i blog ma ci sono buone possibilità che lo sia in quelli con i modelli più recenti. Ho trovato invece qualche difficoltà nella sua installazione in template più datati.
Gli script di questo menù hanno difficoltà a funzionare se vengono caricati su Google Sites mediante l'opzione Schedario, sarà quindi necessario caricarli sul vostro account DropBox. Quando deciderò di cambiare il modello di questo blog, che ormai ha tre anni e mezzo, penso proprio che proverò a installare questo menù perché il numero dei collegamenti che possono essere inseriti sono veramente tantissimi. Ho postato in rete una
I colori possono essere personalizzati e resi compatibili con quelli del nostro sito. Si può sempre variare il colore di sfondo delle voci principali andando su Design > Designer Modelli > Avanzato > Sfondo schede, mentre per modificare il colore del testo si va su Testo Schede
megamenu-orizzontale
Per l'installazione di questo menù bisogna scaricare questo file ZIP cliccando su Download Megamenù e scompattarlo con ZIP Genius o 7-ZIP. Si otterranno due file denominati  jquery.min.js e jkmegamenu.js. Se avete Windows 7 non vedrete le estensioni javascript dei due file. Questi vanno caricati nella cartella Public di DropBox e poi si dovrà acquisire il loro link diretto cliccandoci sopra con il destro del mouse
dropbox-public-link
e andando su DropBox > Copy Public link. Adesso andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Cercate la riga </body> che si trova quasi in fondo al modello e incollate questo codice
<!--Megamenu Inizio-->
<script src='jquery.min.js' type='text/javascript'/>
<script src='jkmegamenu.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/ypw07' target='_blank'><span style='font-size: x-small;'>Megamenu</span></a></noscript>
<script type='text/javascript'>
jkmegamenu.definemenu(&quot;elemento1&quot;, &quot;menu1&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento2&quot;, &quot;menu2&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento3&quot;, &quot;menu3&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento4&quot;, &quot;menu4&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento5&quot;, &quot;menu5&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento6&quot;, &quot;menu6&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento7&quot;, &quot;menu7&quot;, &quot;mouseover&quot;)
jkmegamenu.definemenu(&quot;elemento8&quot;, &quot;menu8&quot;, &quot;mouseover&quot;)
    </script>
<!--Megamenu Fine -->
Dove al posto di 'jquery.min.js' e 'jkmegamenu.js' dovrete inserire i loro URL diretti ottenuti da DropBox. L'evento mouseover indica che il menù si aprirà al passaggio del mouse. Si può sostituire mouseover con click per farlo aprire solo quando si effettua un click. La Voce 8 della Demo online ha questa particolarità e il suo menù verticale si dispiega solo se ci si clicca sopra. L'evento click non è invece presente nel codice che ho appena postato.
Come vedete il menù ha otto voci principali che possono essere modificate aggiungendo o togliendo una riga con la stessa sintassi
jkmegamenu.definemenu(&quot;elementoX&quot;, &quot;menuX&quot;, &quot;mouseover&quot;)
Cercate adesso la riga  ]]></b:skin> e, immediatamente sopra, incollate questo CSS
/* MEGAMENU */
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: #940F04 !important;
font-size:12px;
z-index: 100;
color: #ffffff;   
font-size: 11px;   
text-align:left;   
background-color:#940F04 !important;   
}
.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: #940F04 !important;
font: bold 12px;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: #003366;
}
.megamenu .column li a{
color: #ffffff;   
font-size: 12px;   
text-align:left;   
background-color:#940F04;   
padding:3px 5px;
text-decoration:none;   
display:block;
}
.megamenu .column li a:hover{
background-color: #FDBCB7;   
color:#FFF;
}
.megamenu .column li{
list-style-type: none;
}
Salvate il modello. Si tratta dei fogli di stile che determinano l'aspetto del menù. Ho evidenziato con un colore rosso i parametri più importanti che possono essere modificati. Ne faccio un breve elenco
  1. Il colore dello sfondo del menù è #940F04;
  2. La dimensione dei caratteri è di 12 pixel
  3. Il colore delle voci secondarie del menù è bianco #ffffff;
  4. La distanza tra il testo del menù e il suo contenitore è di 10 pixel (padding)
  5. Il colore delle voci secondarie del menù è #003366; quando ci si passa sopra con il mouse
  6. Il colore di sfondo delle voci secondarie diventa #FDBCB7; nel momento in cui ci passa sopra il mouse
Non rimane che creare il menù vero e proprio con i collegamenti ai nostri post, alle nostre etichette o anche a pagine esterne al blog. In ciascuna voce possono essere inserite più colonne di voci secondarie. Ciascuna colonna ha questa struttura di HTML
<div class="column"><ul>
<li> ....  </li>
   .....
<li> ....  </li>
</ul></div
dove ogni elemento dell'elenco avrà invece questo codice di base
<li><a href="INDIRIZZO_POST" title="NOME_POST">TITOLO POST</a></li>
dove al posto di INDIRIZZO_POST va inserito l'URL della pagina da linkare, in title va messa l'espressione che si vuole visualizzare quando si passa sopra al link con il mouse e TITOLO POST è quello che si vede materialmente nel menù. Per facilitarvi la realizzazione del vostro menù ho pubblicato una
La seconda voce ha quattro colonne, la terza ha due colonne mentre le altre ne hanno una soltanto. Questa distribuzione può anche essere rivista in altro modo. Ricordo che la Voce 8, a titolo di esempio, si apre solo mediante un click. Se volete vedere una demo in cui anche la Voce 8 si apra passandoci sopra il mouse, andate qui. Dove vedete che al posto degli URL ci sono dei cancelletti come questo ( # ) è possibile inserire un ulteriore collegamento. Quando sarete riusciti a creare il codice del vostro menù, andate su Design > Aggiungi un gadget > HTML/Javascript e incollatelo in Sezioni del sito. Salvate, posizionate l'elemento con il mouse e salvate di nuovo. Ricordo che il numero delle voci del menù devono corrispondere al numero di blocchi di codice inseriti in questo HTML altrimenti il menù non funzionerà. In altri termini se volete togliere una voce perché otto sono troppe, dovete anche togliere una riga al primo codice.
Prima di mettervi a creare il vostro menù vi consiglio di provare a vedere se vi funziona il mio codice per evitare un lavoro che potrebbe rivelarsi inutile. Vi ricordo di caricare i javascript su DropBox e di inserire gli URL nel codice altrimenti ovviamente il menù non funzionerà. Non vi posso dare gli URL dei file che ho caricato io  perché molte installazioni mi esaurirebbero la banda che ho a disposizione su DropBox. Il menù è correttamente funzionante con i principali browser quali IE8, IE9, Chrome e Firefox.
Fonte | JkMegamenù -



26 commenti:

  1. Forse non t'importerà molto vista la tua ripugnanza nei confronti di questo browser, ma con IE7 il menù non funziona correttamente.

    RispondiElimina
  2. @Auto ...
    Se uno insiste a usare IE7 nonostante ci siano IE8 e IE9 allora è masochista ;)

    RispondiElimina
  3. Provato a mettere questo, mi piaceva molto l'effetto, ma esce come un elenco puntato verticale:

    http://blogdinoire.blogspot.com/

    Ho installato dropbox, caricato i due file lì, copia il link pubblico, sostituito nell'html..

    Cosa sbaglio? grazie

    RispondiElimina
  4. @kiya
    Purtroppo è probabile che non ci siano errori da parte tua ma solo problemi di fondo che si sono acuiti con i nuovi modelli di Blogger. Trovare un menù che funzioni è diventato una impresa. Io non cambio il modello proprio perché non me la sento di andare alla ricerca di un altro menù che vada bene :(

    RispondiElimina
  5. Scusami tanto, forse vado un po' fuori tema, ma io vorrei solamente mettere uno sfondo alle schede del menù principale come quello che si vede nel megamenù demo. Vorrei cioè avere quell'effetto "riflesso" con il colore che inizia più chiaro e poi diventa più scuro. Nello specifico però con il colore nero. Mi spiegheresti come fare? Grazie mille in anticipo!

    RispondiElimina
    Risposte
    1. @EmergencyRoom
      Il colore che tu hai definito riflesso non deriva dal menù ma dalle impostazioni del template in cui c'è il gradiente nello sfondo delle schede. Quindi non si può fare nulla a meno di cambiare modello.

      Elimina
  6. mi metto al lavoro e se ci riesco faccio un fischio, grazie come sempre spiegato semplicissimo!

    RispondiElimina
  7. allora dopo un paio di ore di lavoro ho piazzato il menù nel mio caso a 7 elementi ma non scorre in nessun modo rimane il link iniziale di ogni elemento e basta dove ho sbagliato? ho caricato su dropbox ma niente non funziona!sono la solita stressatrice scusa ma mi piace parecchio questo widget!

    RispondiElimina
    Risposte
    1. @Caterina
      Sono personalizzazioni in cui ci vuole molta pazienza, precisione e un pizzico di fortuna. C'è molto codice e basta che sbagli qualcosa che non funziona. Questo non è detto che sia successo. Ci possono essere incompatibilità con il modello. Per essere sicura che lo sbaglio è il tuo prova a incollare sul gadget HTML/Javascript il codice di esempio che ho postato
      https://docs.google.com/document/pub?id=1GYEoAL9Of7CtYeFB2x23M4dPv8ftuJfgDo8rNv1ZuXQ&pli=1
      Se funziona allora hai commesso qualche errore.

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. non funziona che peccato, a me basterebbe anche più semplice come quello in questo blog:http://www.lacucinaimperfetta.com/ ho cercato ma non riesco a trovarlo hai qualche suggerimento? grazie!

      Elimina
    4. @Caterina
      Prova qui
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html

      Elimina
  8. ciao ernesto non sapevo dove farti la domanda ma penso che qui va bene.
    mi piacerebbe creare dei menu' parlanti come in questo sito:

    http://www.disney.it/disney-junior/art-attack/

    tu sai qual'e' il codice? grazie in anticipo :)

    RispondiElimina
    Risposte
    1. @nanussa
      E' il sito della Disney!!! Magari si potesse far qualcosa del genere con il CMS di Blogger. Posso fare qualche ricerca ma non ho mai sentito nulla del genere.

      Elimina
    2. per la verita' neanch'io ho sentito niente del genere ma mi ha colpito molto la grafica di Disney!
      ok grazie in anticipo, sarebbe molto carino in blogger !!
      ciao ernesto, buona giornata :)

      Elimina
  9. Due domande
    E' possibile arrotondare i margini della barra?
    Nel caso si volesse lasciare delle caselle della barra senza colonne ma con il link specifico, ad esempio Home con il link del blog, è possibile farlo e come?
    Grazie

    RispondiElimina
    Risposte
    1. @CarloD'Apuzzo
      E' sempre possibile arrotondare gli angolo con i CSS. Leggiti queste due guide
      http://www.html.it/pag/18966/bordi-arrotondati-con-i-css/
      http://www.html.it/articoli/bordi-con-i-css3-1/
      ma è un lavoro impegnativo se non si è padroni della materia

      Elimina
    2. Grazie della risposta.
      Per i bordi credo che per il momento rinuncerò.
      Scusa l'insistenza, puoi darmi qualche indicazione riguardo alla seconda domanda? Tra gli otto link della barra ne vorrei lasciare qualcuno senza menu a tendina, come posso fare?
      Grazie

      Elimina
    3. @CarloD'Apuzzo
      Se per esempio vuoi lasciare senza tendina il numero 6, 7 e 8 elimini queste righe
      jkmegamenu.definemenu("elemento6", "menu6", "mouseover")
      jkmegamenu.definemenu("elemento7", "menu7", "mouseover")
      jkmegamenu.definemenu("elemento8", "menu8", "mouseover")

      Elimina
    4. Grazie
      un ultima cosa. Come posso collegare quelli senza tendina con un link ad esempio Home per la homepage o about per le informazioni personali etc,
      Grazie ancora per la disponibilità e la rapidità nelle risposte

      Elimina
  10. @CarloD'Apuzzo
    Metti degli URL al posto dei cancelletti # nelle stringhe del tipo
    href="#"

    RispondiElimina
    Risposte
    1. Grazie ancora. L'impresa di questo mega menù mi sembra eroica ma mi cimentero! ;-)

      Elimina
  11. Ciao Ernesto. Ho installato questo menu nel mio blog e funziona correttamente, senza problemi. Rispetto al menu proposto da blogger, però, questo mega menu non permette di far cambiare colore ad una scheda quando essa è selezionata e ci troviamo nella pagina corrispondente. Sapresti dirmi come aggiungere questo particolare? Grazie in anticipo

    RispondiElimina
    Risposte
    1. @# Francamente adesso non me la sento di andare a spulciare il codice. Può darsi che non si possa neppure fare...

      Elimina

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