La forza del sogno è quella di disegnare qualcosa
dove gli altri vogliono essere.
Semplice menu verticale con effetto fisarmonica via JavaScript!
13lug2008 Scritto da MaiNick / Archiviato in javascript
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:
Simple AccordionsHomeLorem 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.Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.About UsQuisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.DownloadsLorem 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.
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.
Random Posts
4 Risposte a “Semplice menu verticale con effetto fisarmonica via JavaScript!”
Trackbacks
-
upnews.it
luglio 13th, 2008 alle 18:25
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
- Iscriviti al Feed RSS
- 69 iscritti
Angelo
luglio 13th, 2008 alle 20:35
Adoro questi script.. ;D ottimo tutorial! ciao!
Chiara
dicembre 26th, 2008 alle 19:07
..molto bello.. ma dov è che va inserito il link associato al bottone?
MaiNickWeb
dicembre 28th, 2008 alle 11:36
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.