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:

1. Scaricare il file jquery.js;
2. Inserire tra i tag head il codice necessario per installare lo script:

<script type=”text/javascript” src=”jquery.js”></script>

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