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!!! 
Ana on 
luigi on 
alessio.... on 
gffh on 
Pietro on 
fedeweb on 
icosensei on 
4 luglio 2008 at 09:25
Complimenti fede, vedo che ti informi praticamente sempre su tutto. Sicuramente a qualcuno potra’ servire. Mitico
4 luglio 2008 at 12:51
5 luglio 2008 at 00:09
Ottima segnalazione. Questi framework JavaScript sono eccezionali.
Ultimamente mi sono “innamorato” di EXT JS, eccellente in coppia con Adobe Air.
15 ottobre 2008 at 20:35
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!
15 ottobre 2008 at 20:37
Perdonami, mi mancava una virgoletta, ora funziona tutto!
Grazie mille per l’ottima guida!
16 ottobre 2008 at 10:39
Bene ottimo!! il 99% delle volte sono delle virgolette, o dei punti e virgola a non far funzionare le cose..
29 ottobre 2008 at 00:06
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
20 gennaio 2009 at 17:26
Ottimo veramente… molto utile
20 gennaio 2009 at 18:09
Grazie! e complimenti per il design del tuo blog..mi piace molto!
7 settembre 2009 at 13:26
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?
7 settembre 2009 at 13:48
Cosa vuoi realizzare esattamente? un menu?
22 ottobre 2009 at 15:30
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!!
22 ottobre 2009 at 17:22
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
22 ottobre 2009 at 19:00
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.
23 ottobre 2009 at 16:54
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
23 ottobre 2009 at 18:41
Perfetto, sono riuscito con l’accordion, jquery è davvero uno strumento straordinario.
Ti ringrazio per la risposta.
24 ottobre 2009 at 17:31
Ottimo, sono contento che hai risolto. E non perderti il prossimo tutorial su jquery che arriverà fra pochi giorni
25 ottobre 2009 at 00:50
Di sicuro non me lo perderò, grazie per le dritte, alla prossima!
26 ottobre 2009 at 14:33
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
27 ottobre 2009 at 09:33
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 giugno 2010 at 12:51
ciao fede… grazie mille per questo script!!!! se volessi fare la stessa cosa ma da sotto verso sopra??
25 giugno 2010 at 10:16
Ciao matteo e benvenuto nel blog
Prova a guardare qui: http://samuelgarneau.com/lab/slidebox/. Probabile che ci scappi un tutorial!!
25 giugno 2010 at 10:35
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…
26 luglio 2010 at 22:50
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?
27 luglio 2010 at 13:19
Ciao Simone e benvenuto nel blog
Vuoi fare in modo che lo slide vada sopra il testo che c’è sotto?
12 novembre 2010 at 22:59
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?
26 novembre 2010 at 16:12
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.
26 novembre 2010 at 16:25
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
21 febbraio 2011 at 20:11
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!
22 febbraio 2011 at 09:20
Ciao Elias e benvenuto nel blog
Prima di risponderti volevo capire dove vuoi utilizzare il secondo panel. Attenzione a non esagerare con questi elementi
23 febbraio 2011 at 21:29
Eccomi, grazie per avermi risposto, allora ne dovrei usare diversi nella stessa pagina, in scala l’uno sotto l’altro. Come devo fare?
26 febbraio 2011 at 16:34
Ciao sono ancora io, ma non mi hai più risposto…
27 febbraio 2011 at 23:24
Ciao Elisa, scusa per il ritardo nella risposta, ma sono preso dalla tesi..
Comunque secondo me ti conviene utilizzare il plugin Accordion.
27 febbraio 2011 at 23:47
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
15 giugno 2011 at 17:46
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
20 agosto 2011 at 11:53
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..
7 novembre 2011 at 09:00
ciao è possibile inserire questo pannello su joomla.
7 novembre 2011 at 11:33
Ciao Atanasio e benvenuto nel blog
Questo forse può fare al tuo caso: Top Panel Slider
14 novembre 2011 at 23:45
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