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:

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:

che è nella forma:

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

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