javascript

Semplice menu verticale con effetto fisarmonica via JavaScript!

Simple Accordions

Di effetti a fisarmonica in JavaScript ne sono stati creati moltissimi, ma quello che oggi vi voglio presentare ha una caratteristica molto importante per gli sviluppatori, è leggerissimo.

Uno JavaScript che vi permette di avere un effetto fisarmonica sul menu o qualsiasi altro box dei vostri siti internet. La caratteristica fondamentale, come dicevo prima, è che pesa poco più di 1Kb, questo rende lo script più funzionale e veloce nel caricamento.

Uno degli accordion script più piccoli ed estremamente semplice e facile da integrare. Non richiede alcun framework ed è completamente cross-browser compatibile.

La prima cosa da fare è quella di inserire il seguente codice JavaScript, all’interno della sezione <head> del vostro sito:

[js]
<script type="text/javascript" src="js/accordian.pack.js"></script>
[/js]

e inserire all’interno del tag <body> il seguente codice JavaScript per il controllo della fisarmonica e per caricare all’apertura della pagina lo script:

[html]
<body onload="new Accordian(‘basic-accordian’,5,’header_highlight’);">
</body>
[/html]

che è nella forma:

[html]
<body onload="new Accordian(‘id DIV container’,velocità,’classe voce di fisarmonica’);">
</body>
[/html]

Una volta inserito questo andremo a creare il nostro menu o box con il seguente codice:
[html]
<div id="basic-accordian"><!–DIV Container Accordion–>
<div>Simple Accordions</div>
<!–Inizio voce di fisarmonica–>
<div id="test-header" class="accordion_headings header_highlight">Home</div>
<!–Voce della fisarmonica (clic per mostrare) –>
<!–Prefisso della voce (il DIV di sopra) e del contenuto (il DIV al di sotto di questa) devono essere lo stesso … ad es. foo-header &#038; foo-content–>
<div id="test-content"><!–DIV che viene mostrato / nascosto facendo clic su voce di intestazione–>
<div class="accordion_child"><!–Questo DIV è utilizzato come padding…–>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
</div>
</div>
<!–Fine voce di fisarmonica–>
<!–Inizio voce di fisarmonica–>
<div id="test1-header" class="accordion_headings" >
<div id="test1-content">
<div class="accordion_child">
Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
</div>
</div>
<!–Fine voce di fisarmonica–>
<!–Inizio voce di fisarmonica–>
<div id="test1-header" class="accordion_headings">About Us</div>
<div id="test1-content">
<div class="accordion_child">
Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
</div>
</div>
<!–Fine voce di fisarmonica–>
<!–Iniziovoce di fisarmonica–>
<div id="test2-header" class="accordion_headings">Downloads</div>
<div id="test2-content">
<div class="accordion_child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
</div>
</div>
<!–Fine voce di fisarmonica–>
</div>
<!–Fine DIV Container Accordion–>
</div>
[/html]
Terminate queste tre operazioni avremo un menu con effetto fisarmonica leggero e funzionante al 100%. Lo script è veramente comodo, un altro effetto 2.0 da inserire sul nostro sito personale.

Maggiori informazioni sullo script li troverete nel sito dell’autore; è possibile vedere anche cosa fa lo script stesso andando alla pagina dedicata alle demo.

  • Semplice menu verticale con effetto fisarmonica via JavaScript!…

    Uno JavaScript che vi permette di avere un effetto fisarmonica sul menu o qualsiasi altro box dei vostri siti internet. Pesa poco più di 1Kb, questo rende lo script più funzionale e veloce nel caricamento….

    13 Luglio 2008
  • Adoro questi script.. ;D ottimo tutorial! ciao!

    13 Luglio 2008
  • Chiara

    ..molto bello.. ma dov è che va inserito il link associato al bottone?

    13 Luglio 2008
  • Le voci su cui cliccare per fare aprire la tendina sono compresi tra i DIV commentati nel codice con “voci fisarmoniche” taggati con la classe “header_highlight”, il terzo parametro dell’oggetto “Accordian” creato con la funzione LOAD al caricamento della pagina.
    Se hai qualche altro dubbio non aver problema a chiedere.

    13 Luglio 2008
  • stephanie

    Volevo provare questo menu ma il javascript dove lo trovo??

    13 Luglio 2008
  • Ciao! sto cercando questo effetto da due giorni.. secondo te è possibile inserirlo in una pagine di wordpress? dove inserisco il codice javascript, visto che non c’è ? 🙁

    13 Luglio 2008
    • Ciao Nathalie, felice di averti sul mio blog. Puoi inserirlo tranquillamente modificando anche dall’editor di wordpress la pagina header.php inserendo lo script e richiamando la funzione con tag onload da body, come scritto sopra nell’articolo. Poi metti il resto del codice per creare l’effetto a fisarmonica nella pagina che vai a creare.

      13 Luglio 2008
  • Gab

    io non ho capito un cavolo di come si fà 🙁 aiuto sono stupido

    13 Luglio 2008
    • @ Gab: Puoi scaricarti la demo e con il seguente articolo avanti forse riesci a capirne di più.

      13 Luglio 2008
  • Billy Jimmy

    Bellissimo!

    13 Luglio 2008
    • Grazie 😉

      13 Luglio 2008
  • JR

    Si ma se non posti il codice contenuto in
    Non ha neanche senso inserirla questa riga, che poi qui è diverso il percorso rispetto alla demo.

    13 Luglio 2008
  • Francesco

    Ciao,
    intanto complimenti per il sito!
    Sto provando ad usare questo codice per il menu a tendina, ma se provo ad aggiungere altri campi, essi rimangono fissi e non più a scomparsa come i primi tre. Mi sapresti spiegare il motivo? grazie!

    13 Luglio 2008

LEAVE A REPLY

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.