Fw

Wordpress Creative Developer

Creare uno slide panel con jquery

  • Plugin 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:

  1. Scaricare il file jquery.js;
  2. Inserire tra i tag head il codice necessario per installare lo script:
  3. <script type=”text/javascript” src=”jquery.js”></script>

  4. 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”>

$(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!!! 😉

Scarica il sorgente

Guarda l’esempio

44 Commenti

  1. Complimenti fede, vedo che ti informi praticamente sempre su tutto. Sicuramente a qualcuno potra’ servire. Mitico

  2. 😉 Grazie grazie

  3. Ottima segnalazione. Questi framework JavaScript sono eccezionali.

    Ultimamente mi sono “innamorato” di EXT JS, eccellente in coppia con Adobe Air.

  4. […] 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 […]

  5. […] 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 […]

  6. 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!

  7. Perdonami, mi mancava una virgoletta, ora funziona tutto!
    Grazie mille per l’ottima guida! 🙂

  8. Bene ottimo!! il 99% delle volte sono delle virgolette, o dei punti e virgola a non far funzionare le cose..

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

  10. Ottimo veramente… molto utile

  11. Grazie! e complimenti per il design del tuo blog..mi piace molto!

  12. 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?

  13. Cosa vuoi realizzare esattamente? un menu?

  14. […] Here is the original post: Creare uno slide panel con jquery | Fedeweb […]

  15. 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!!

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

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

  18. 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 😉

  19. Perfetto, sono riuscito con l’accordion, jquery è davvero uno strumento straordinario.
    Ti ringrazio per la risposta.

  20. Ottimo, sono contento che hai risolto. E non perderti il prossimo tutorial su jquery che arriverà fra pochi giorni 😉

  21. Di sicuro non me lo perderò, grazie per le dritte, alla prossima!

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

  23. 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? 🙂

  24. ciao fede… grazie mille per questo script!!!! se volessi fare la stessa cosa ma da sotto verso sopra??

  25. Ciao matteo e benvenuto nel blog 😉

    Prova a guardare qui: http://samuelgarneau.com/lab/slidebox/. Probabile che ci scappi un tutorial!!

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

  27. 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?

  28. Ciao Simone e benvenuto nel blog 😉

    Vuoi fare in modo che lo slide vada sopra il testo che c’è sotto?

  29. Ciao federico, all’ultima tua domanda che hai rivolto a simone visto che servirebbe anche a me ti rispondo io con un SI! vorrei che lo slide vada sopra al testo. Come faccio?

  30. Ciao Fede,

    mi piace l’idea di utilizzare lo sliding div sul sito del Bologna per rendere disponibili contenuti…”onclick”… che normalmente resterebbero nascosti… Solo che mi servirebbe che questo div, al click del mouse, entrasse da destra verso sinistra ed uscisse da sx verso destra… mi puoi aiutare?

    grazie in ogni caso

    p.s.: ho duplicato il post perchè in quello precedente, per errore, non avevo scelto il “Tienimi aggiornato…”. Scusami.

  31. Ciao Andrea e benvenuto nel blog 😉

    Forse questo fa al caso tuo: Learning jQuery: Horizontal Panel Sliding With animate() function

    Bisogna apportare un po’ di modifiche per ottenere quello che vuoi, ma penso sia una buona base da cui partire 😉

  32. Ciao fede, complimenti per il blog, io ho fatto come hai detto ed è andato tutto bene, però ho un problemino, io ne vorrei inserire più di uno in una pagina, ma non ci riesco, quando lo faccio il 2 non funziona, ho provato anche a fare del css apparte cambiando il nome delle classi ma nada, come posso fare? ciao e grazie!

  33. Ciao Elias e benvenuto nel blog 😉

    Prima di risponderti volevo capire dove vuoi utilizzare il secondo panel. Attenzione a non esagerare con questi elementi 😉

  34. Eccomi, grazie per avermi risposto, allora ne dovrei usare diversi nella stessa pagina, in scala l’uno sotto l’altro. Come devo fare?

  35. Ciao sono ancora io, ma non mi hai più risposto…

  36. Ciao Elisa, scusa per il ritardo nella risposta, ma sono preso dalla tesi..

    Comunque secondo me ti conviene utilizzare il plugin Accordion. 😉

  37. Grazie per la risposta, ho visto quello che mi hai linkato, interessante anche se preferivo quello che tu hai spiegato in questo tutorial è più fluido e mi piace di più, se magari quando hai 5 minuti e sa già come si fa e se è fattibile, mi spieghi come metterne più di uno.

    In bocca al lupo per la tesi 😉

  38. Ciao!!super complimenti!!!semplicissima e funzionale allo stesso tempo!!!
    Solo volevo chiederti una cosa…a me servirebbe che avesse il movimento inverso, ovvero che tenesse come punto fisso la fine del blocco…L’esempio perfetto lo puoi trovare qui: http://www.museumtheoriginal.com/

    Ti ringrazio!!!e attendo una tua risposta 😉

  39. Copiata para para da qua anfame..
    http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

    ma almeno cambia le classi css.. oppure metti la fonte..

  40. ciao è possibile inserire questo pannello su joomla.

  41. Ciao a tutti, complimenti per il blog.

    Io ho una domanda ho utilizzato il comando slideToggle in una funzione per mostrare e nascondere il contenuto di un div , solo che quando si espande tutto ciò che è sotto il div, scende verso il basso.
    Sapete dirmi come fare in modo che la parte sottostante non scenda e il div espandendosi vada sopra il contenuto sottostante.

    Spero di essere stato chiaro

    Grazie

  42. […] passato abbiamo già visto un effetto simile, solo che in quel caso il pannello compariva dall’alto, mentre con PageSlide potremo far […]

  43. Ho seguito alla lettera le istruzioni, ma il risultato è quello elencato nel sito di prova …

    c’è qualche incompatibilità con blogger ? =(

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *