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

Per l'installazione bisogna innanzitutto personalizzare il menù modificando i parametri evidenziati di diverso colore

• Menù Accordion Configurazione -

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

• Codice di esempio di Menù Accordion -

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.