Tutorial: Accordion con Moo.fx
L'accordion è un effetto molto bello che fa lo "sliding" tra diverse div: è un modo elegante per tenere compatto un menù: potete vedere un esempio di accordion sul blog di Federico Fasce.
Per realizzare velocemente un menù con l'effetto accordion possiamo utilizzare le ultra-premiate, ultra-utilizzate e italianissime Moo.fx. Scaricate la versione per prototype.
Dopo aver scaricato le Moo.Fx partiamo con il nostro menù. Create un file HTML, includete prototype.lite.js, moo.fx.js e accordion.js. Inserite all'interno del body 4 coppie di div: le coppie saranno composte da una div con attributo class "titolo" seguita da una div con attributo class "contenuto".
La div "div.titolo" corrisponde sezioni del menù, mentre "div.contenuto" conterrà le sottovoci del menù. Il sorgente dell'esempio è molto più chiaro al riguardo 
La funzione init(), chiamata al caricamento della pagina, si occuperà di creare il nostro effetto, vediamola nel dettaglio.
function init() { // Prende gli elementi tramite la classe var titoli = document.getElementsByClassName('titolo'); var contenuti = document.getElementsByClassName('contenuto'); // Crea Accordion var myEffect = new fx.Accordion(titoli, contenuti, {opacity: false, duration: 300 }); }
Niente di fantascientifico... Tramite la funzione getElementByClassName() inseriamo in un vettore tutti gli elementi che hanno come classe "titolo" e "contenuto". Di seguito creiamo l'effetto con fx.Accordion().
Le opzioni passate riguardano in questo caso la trasparenza e la durata in millisecondi delle transizioni. Maggiori dettagli sulle opzioni potete trovarli sulla documentazione ufficiale: ad esempio l'opzione alwaysHide permette di chiudere completamente il menù.
Tutorial breve, giusto per riprendere un po' la mano 
Vota!
Loading ...Articoli che potrebbero interessarti
Un post al mese…A chi serviva il PDF?
Abbonatevi a questo feed. Ora
Il meglio della settimana - 31
Due tutorial natalizi
16 Luglio 2007 alle 10:10
odio usare le lib… o framework (chiamiamoli come vogliamo) ma non c’è un modo semplice e corto per fare questo effetto???
16 Luglio 2007 alle 12:42
@Skyline
Se mi trovi qualcosa di più corto e semplice di una funzioncina JS di 3 righe e tre files da includere nella pagina fammelo sapere!
Anch’io sono per il “fai da te”, ma ci sono casi in cui non è necessario inventare da capo l’acqua calda.
16 Luglio 2007 alle 14:00
si beh se tutti la pensano così ci saranno script che consumano 20 mega… VBulletin ne consuma 15 siamo a buon punto
16 Luglio 2007 alle 15:49
perdonate il profano.
Ho visto quest’effetto fatto molto bene (probabilmente lo conoscete già da mo’)
http://stickmanlabs.com/accordion/
Lo stesso autore ha realizzato anche lightwindow (davvero stupenda e semplice).
Unica cosa fatico a farla funzionare su wordpress.
Qualcuno di voi maghi ci è già riuscito?
ciao, Alessio
16 Luglio 2007 alle 17:24
In che sezione lo dovresti mettere? Per i post? Per una cosa a parte? Fammi sapere
16 Luglio 2007 alle 18:06
adesso stavo provando nei post, ma il risultato è che si perde gli effetti.
http://www.youon.it/lab/wordpress/
infatti il file si apre ma il background ed un altro paio di cosette se le perde.
scusa ci ho messo un po’ ma ho dovuto rifare il post di esempio.
16 Luglio 2007 alle 19:30
Bel tutorial, semplice ma efficace
17 Luglio 2007 alle 09:40
Grande Francesco…però non riesco a capire una cosa…sono moooolto noob in queste cose.
Allora, per l’html non c’è problema, sono già riuscito a farlo funzionare tempo addietro.
Ma col maledetto WP non riesco proprio ad ottenere l’effetto che voglio.
Vorrei avere una sidebar tipo quella di Kurai, ma sinceramente, non so dove piazzare tutto il codice. Cioè, la funzione init() la devo mettere in sidebar.php o in qualche altra pagina?
Salvaaaami
17 Luglio 2007 alle 10:03
@Bane
Devi metterla nell’header e poi aggiungere al body la chiamata come nell’esempio.
17 Luglio 2007 alle 10:16
Grazie caro, ora provo…se non funziona…avrà presto mie notizie
17 Luglio 2007 alle 12:14
@Bane
Mi trovi su MSN, come al solito.
P.s.
Tu VIENI all’iWordCamp. E non è una domanda.
17 Luglio 2007 alle 20:21
Si ho letto e sinceramente l’idea mi stuzzicava…cmq l’accordion funziona, thanks.
E comunque io son n00b che vengo a fare?
19 Luglio 2007 alle 18:29
Hi,
i too have created an accordian in JS which is just 1KB.
please let me know your comments about it…
Its on my site
19 Luglio 2007 alle 19:26
@Navin Raj
Really neat!!! Do you also have a plain (not encrypted) version?
21 Luglio 2007 alle 12:01
Ma non esiste un modo per creare in modo decente accordion annidati?
Menu, sottomenu, etc…
21 Luglio 2007 alle 17:07
@gatiba
Sai che non ho mai provato?
21 Luglio 2007 alle 21:11
Ok l’accordion funziona, ne ho approfittato per cambiare di nuovo tema. Thx a lot!
30 Luglio 2007 alle 15:12
il post è di qualche giorno fa ma questo template per wp merita secondo me http://ensellitis.com/sandbox/
01 Agosto 2007 alle 08:38
@YouON
Carino il template!
06 Agosto 2007 alle 16:37
ciao!!
Finalmente ho trovato un tutorial chiaro su questo menù!
Complimenti, solo una cosa però. Ho seguito alla lettera quello che hai scritto, ma ho un problema, anche se passo l’opzione alwaysHide:true il menù non è chiuso al caricamento della pagina. Basta solo passare quello o devo modificare anche qualcos’altro?
grazie per la risposta
06 Agosto 2007 alle 19:38
@Lionrob
Per quel che ne so una tab deve essere sempre aperta… Però devo controllare
08 Agosto 2007 alle 18:39
mmm a me rimangono tutti aperti i menù fin da subito… purtroppo ho tolto il menù quindi non posso lasciarti neanche un link per vedere l’effetto che fa a me.
Comunque non sono esperto in ste cose, anzi sono agli inizi, quindi volevo chiederti se per caso c’è qualcosa sottointeso da fare oltre a quello che c’è scritto lì perchè funzioni correttamente?
grazie ancora e scusami di nuovo per il disturbo ^^
08 Agosto 2007 alle 18:50
Allora vuol dire che c’era un qualche errore nel JS. La console di Firefox che diceva?
09 Agosto 2007 alle 16:39
mmm … non l’ho guardata
… anche perchè mi è già successo che in qualche sito non funzionasse qualcosa e si apriva da sola, quindi stavolta che non l’ha fatto pensavo fosse tutto ok.
ora cmq non posso riprovare a mettere il menù nel sito perchè vado via ^^ .. quando torno al massimo mi rifarò vivo ^^
grazie ancora della disponibilità
20 Novembre 2007 alle 22:23
hi,
i try to implement your code (its very nice) to a site. i got a problem with it. it is possible to open a specific content instead of the default first?
please drop me a mail.
20 Novembre 2007 alle 22:33
Hi Robert.
You have to think of something like a cookie or a PHP trick that opens the specific content you want to show.
I’ve made something similar for a work project, maybe I’ll post it…
22 Novembre 2007 alle 11:17
hmm.. my idea to somehow open a slide with a specific id. as i saw i can open the second slide if i change in the “this.showThisHideOpen(0)” to “this.showThisHideOpen(1)” can you help me to write a “case” that grabs an id?
19 Giugno 2008 alle 19:17
Ciao a tutti.
Avete modo di dirmi come si fa a far si che non si apra in automatico la prima voce dell’accordion?