Creare uno slide panel con jquery
Ultimamente ho avuto l’esigenza di creare un pannello che compariva a comparsa, come in questo esempio.
Per ottenere questo effetto ho utilizzato jquery, una libreria javascript che consente di manipolare facilmente il codice HTML, creare animazioni ecc,, ma principalmente permette di velocizzare la scrittura del codice javascript.
Per realizzare questo effetto, dovete:
- Scaricare il file jquery.js;
- Inserire tra i tag head il codice necessario per installare lo script:
- Sempre tra i tag head, aggiungere questo codice, che potete anche mettere in file esterno che chiamate come visto in precedenza per jquery.
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
});
});
</script>
Dove #panel è l’id del div che dovrà comparire con l’effetto slide, e .btn_slide la classe associata al pulsante che attiva il div #panel.
<div id=”panel”>
Qui ci puoi mettere quello che vuoi… </div>
<p class=”slide”><a href=”#” class=”btn-slide”>Slide Panel</a></p>
Spero possa servirvi per i vostri progetti!!! 
E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video
Inoltre potrai seguirmi su twitter, facebook o friendfeed!
Articoli simili che potrebbero interessarti
Ciao, mi chiamo Federico Pian e lo scopo di questo blog è condividere con te la mia passione per la grafica e il web design.
Complimenti fede, vedo che ti informi praticamente sempre su tutto. Sicuramente a qualcuno potra’ servire. Mitico
Ottima segnalazione. Questi framework JavaScript sono eccezionali.
Ultimamente mi sono “innamorato” di EXT JS, eccellente in coppia con Adobe Air.
[...] all’utente di cambiare lo sfondo del sito Qualche giorno fa vi ho parlato dello slide panel, ovvero un div che compare a seconda dell’azione [...]
[...] come creare un effetto hover animato, sfruttando jquery, di cui è stata già vista un’applicazione qualche settimana fa. Ecco un esempio di quello che andremo a [...]
Ciao!
Ho provato a seguire la guida che hai fatto, ma purtroppo non riesco a farla funzionare!
Il contenuto del div lo vedo dall’inizio (e non con lo scorrimento del pannello); mentre se clicco nel punto che dovrebbe attivare lo scorrimento, mi apre una finestra dove mi dice che l’indirizzo è irragiungibile.
Eppure ho fatto tutto esattamente come da guida!
Puoi darmi una mano?
Grazie!
Perdonami, mi mancava una virgoletta, ora funziona tutto!
Grazie mille per l’ottima guida!
Bene ottimo!! il 99% delle volte sono delle virgolette, o dei punti e virgola a non far funzionare le cose..
Scusate ma qualcuno di voi sa come potrei fare quella cosa dello slide panel ma a partire da destra e farlo aprire verso sinistra invece che su e giù?
Grazie
Ottimo veramente… molto utile
Grazie! e complimenti per il design del tuo blog..mi piace molto!
Ciao, ho provato a seguire tutte e istruzioni e tutto funziona, ma adesso ho un problema: voglio creare piu pulsanti slide, uno sotto l’altro,e il problema non è creare i bottoni, ma far si che ha ogni bottone scenda una finestra diversa.
Mi puoi aiutare?
Cosa vuoi realizzare esattamente? un menu?
[...] Here is the original post: Creare uno slide panel con jquery | Fedeweb [...]
Ciao, anch’io ho lo stesso problema.
Devo creare un menù con le slide che aprono i vari livelli. Riesco a farlo duplicando lo script con valori diversi, però dovrei fare in modo che all’apertura di uno slide si chiudesse l’altro aperto precedentemente.
Spero tu possa aiutarmi, sto impazzendo da una settimana.
Ciao e complimenti per il sito!!
Ciao Luigi e benvenuto su Fedeweb. Forse tu hai bisogno di questo: http://www.i-marco.nl/weblog/archive/2007/11/25/jquery_accordion_menu
Ciao Marco…in effetti avevo già trovato degli esempi di accordion, però volevo integrare il codice qui sotto:
$(“bottone_creaslide”).click(function(){
$(“#.livello_da_aprire”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
Il tutto funziona, anche se lo duplico per altri livelli con altre classi, il problema è che vorrei che all’apertura di un livello si chiudessero gli altri, eventualmente aperti in precedenza.
Come posso integrare il codice?
Ciao e grazie ancora.
Il mio consiglio è di utilizzare il menu accordion che è più indicato per quello che vuoi realizzare.
Questo script è utilizzato esclusivamente per avere un unico pannello. Comunque se riesco a trovare una soluzione per questo specifico script te la comunicherò imemdiatamanete
Perfetto, sono riuscito con l’accordion, jquery è davvero uno strumento straordinario.
Ti ringrazio per la risposta.
Ottimo, sono contento che hai risolto. E non perderti il prossimo tutorial su jquery che arriverà fra pochi giorni
Di sicuro non me lo perderò, grazie per le dritte, alla prossima!
Ciao Marco, vorrei segnalarti un altro mio problema che tu spero possa risolverlo.
Con jimgmenu e accordion sono riuscito a far funzionare tutto, però firefox non mi riconosce jimg menu. Sai come potrei fare?
Ciao
Così su due piedi mi è difficile aiutarti senza vedere il codice. Mandami un’e mail con il codice così provo a dargli un’occhiata
.
Una curiosità..chi è Marco?
ciao fede… grazie mille per questo script!!!! se volessi fare la stessa cosa ma da sotto verso sopra??
Ciao matteo e benvenuto nel blog
Prova a guardare qui: http://samuelgarneau.com/lab/slidebox/. Probabile che ci scappi un tutorial!!
grazie.. il problema è che è completamente diverso!! io sto usando il tuo.. sono riuscito a girare il pannello in modo che venga su da sotto, il problema è nella barra che contiene il bottone che non sono capace di fissarla al pannello per farla salire e scendere…
Ciao, il tuo tutorial sullo slide panel è proprio ciò che cercavo, solo non riesco ad integrarlo in una pagina del mio sito. Ossia, io vorrei inserire lo slide in un div in modo che quando apro lo slide, il testo che si trova nel div non scorra verso il basso con lo slide.
come si può fare?
Ciao Simone e benvenuto nel blog
Vuoi fare in modo che lo slide vada sopra il testo che c’è sotto?