24 febbraio 2011

Menù JQuery Accordion per nuovi modelli di Blogger.

JQuery è uno software framework in javascipt che permette una grande personalizzazione dal lato client. Uno degli effetti più comuni è quello della dissolvenza che permette di far scomparire l'elemento con un effetto slide. Il menù che vado a presentarvi si basa in particolare sulla libreria Accordion e lo avevo già presentato qualche tempo fa. L'obiettivo è stato quello di renderlo compatibile anche con i nuovi template di Blogger ottenuti con il Designer Modelli.

Demo del Menù Accordion -
Il menù è situato nella sidebar di sinistra ma può essere messo anche a destra e personalizzato come dimensioni, colori e font. Ciascuna voce principale può nascondere un indefinito numero di voci secondarie che verranno aperte cliccandoci sopra con il mouse
menù accordion blogger
Per l'installazione bisogna innanzitutto personalizzare il menù modificando i parametri evidenziati di diverso colore
Riepilogo brevemente gli interventi che possono essere fatti
  1. Il file ddaccordion.js l'ho caricato sul mio account DropBox e potete scaricarlo da qui. Vi consiglio di caricarlo sul vostro account DropBox nella cartella Public e di acquisirne il link diretto. Se non siete iscritti a Dropox potete registrarvi compilando questo modulo. Il link del javascript va inserito nel codice tra le due virgolette src='URL del link diretto del file ddaccordion.js
  2. width: 200px; rappresenta la larghezza del menù
  3. font: bold 12px Arial; significa che i caratteri sono di 12 pixel, in grassetto e di tipo Arial
  4. color: white; è il colore del testo nelle voci principali. Si può inserire anche un codice esadecimale al posto di white (es: #FFFFFF)
  5. background:#003366 url(immagine.png) è il colore dello sfondo del menù. Si può lasciare solo il colore di background oppure si può caricare sul web, per esempio su Picasa, una immagine che serva come background. In questo caso si può sceglierne una di dimensioni 1x16 pixel o 2x18 pixel. I più bravi nella grafica possono inserire anche il gradiente per dare un aspetto al menù più professionale. L'immagine va salvata in PNG e il suo URL va sostituito a immagine.png
  6. color: #003366; rappresenta il colore del testo delle voci secondarie
  7. padding-left: 14px; è la cosiddetta identazione cioè il rientro della voce secondaria rispetto a quella principale
  8. border-bottom: 1px solid #dadada;font-size: 90%; sono i parametri che determinano lo stile del bordo e la dimensione dei caratteri delle voci secondarie
  9. color: #800080; è il colore dei link già visitati e di quelli puntati con il mouse, rispettivamente visited e hover, possono anche essere diversi
  10. background-color: #4DA7FF è il colore di sfondo di una voce secondaria quando viene puntata con il mouse
Dopo aver effettuato tutte le personalizzazioni si va su Design > Modifica HTML si cerca la riga </head> e si incolla il codice subito sopra. Salvate il modello. Per la creazione del menù dovete seguire la falsariga di questo
Il menù deve essere compreso tra le righe <div class="arrowlistmenu"> e </div>. Per inserire una voce principale usiamo la sintassi
<h3 class="menuheader expandable">VOCE PRINCIPALE</h3>
mentre per inserire le rispettive voci secondarie il codice da personalizzare è questo
<ul class="categoryitems">
<li><a href="URL PRIMA VOCE">TITOLO PRIMA VOCE</a></li>
<li><a href="URL SECONDA VOCE" target="_blank">TITOLO SECONDA VOCE</a></li>
<li><a href="URL TERZA VOCE">TITOLO TERZA VOCE</a></li>
</ul>
dove possono essere inserite tutte le voci che vogliamo. Il tag target="_blank" si usa quando si vuole fare aprire il link in un'altra scheda, serve per i collegamenti esterni al blog come potrebbe essere il Profilo su Blogger, su Twitter o su FriendFeed o la Pagina Fan su Facebook.
Dopo aver creato il menù si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito. Si salva e si posiziona a piacere con il mouse, quindi si salva di nuovo. Il funzionamento di questo menù è stato testato con tutti principali browser e non dà problemi neppure con le vecchie versioni di Internet Explorer.



7 commenti :

  1. Ti adoro!
    Quello vecchio mi aveva sempre dato problemi, si vedeva solo su firefox e nemmeno sempre, ogni tanto se ne spariva... questo funzionaaaaaa!!! :D
    Perdona l'entusiasmo, ma era una delle due cose mancanti per avere un blog esattamente come l'ho sempre desiderato :)))
    Grazie infinite, sei impagabile!

    RispondiElimina
  2. @Azabel
    Che entusiasmo! Grazie :D

    RispondiElimina
  3. Non funziona bene..non sempre si apre il menu >.<

    RispondiElimina
  4. Ciao Ernesto, ho seguito passo passo i tuoi consigli ma non riesco a farlo funzionare, rimane tutto aperto. Da cosa può dipendere?

    Dany

    RispondiElimina
    Risposte
    1. @# Ci possono essere varie cause. Il post è vecchio e c'era una versione di JQuery antiquata. Ora l'ho aggiornata. Può darsi che nel tuo template ci sia incompatibilità con JQuery o che ci sia un'altra versione. Carica il file src='... ddaccordion.js' sulla tua cartella Public di Dropbox.

      Elimina
    2. E' quello che avevo fatto, caricare quel file su dropbox. Mi sai consigliare un altro gadget o menù laterale espandibile?
      Dany

      Elimina
    3. @# Leggi qui
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      o qui
      http://www.ideepercomputeredinternet.com/search/label/menu

      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.