immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Semplice menu verticale con effetto fisarmonica via JavaScript!

di MaiNick | 13 Lug 2008 | javascript | 14 Commenti

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:

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

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:

<body onload="new Accordian('basic-accordian',5,'header_highlight');">
</body>

che è nella forma:

<body onload="new Accordian('id DIV container',velocità,'classe voce di fisarmonica');">
</body>

Una volta inserito questo andremo a creare il nostro menu o box con il seguente codice:

<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>

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.

Tags: , , ,

14 Commenti

  1. Angelo ha detto:

    Adoro questi script.. ;D ottimo tutorial! ciao!

  2. Chiara ha detto:

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

  3. MaiNickWeb ha detto:

    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.

  4. stephanie ha detto:

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

  5. Nathalie ha detto:

    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’è ? 🙁

    • MaiNick ha detto:

      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.

  6. Gab ha detto:

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

  7. Billy Jimmy ha detto:

    Bellissimo!

  8. JR ha detto:

    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.

  9. Francesco ha detto:

    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!

Trackbacks

  1. upnews.it ha detto:

    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….

Lascia un Commento

^ Torna su