Web sitelerinin kod olarak yapısı kadar dinamik yapılarını kullanıcıya sunma şekilleri de önemlidir. Yeni nesil tasarımlarda genelde üye paneli, yada pop up bilgi vermek için kullanılan slide panel yapımını kendimce basit şekilde anlatmaya çalıştım umarım faydalı olur.

Öncelikle jquery.js dosyasını projemize ekliyoruz

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

sonrasında html olarak 1 adet div ve 2 link oluşturuyoruz

<a href="#">Kutuyu Aç / Kapat</a>
<div>
 Slide panel kutusunu ister <a href="#">Kutuyu Kapat</a> butonu ile kapatınız isterseniz kutuyu aç butonu ile kapatabilirsiniz
</div>

ve style kodumuzu yerleştirip kabaca bir düzen içinde olmasını sağluyoruz

<style>
body
{
 background:#0f1923;
}
.kutu
{
 width:200px;
 height:200px;
 border:#ccc 1px dashed;
 background:#fff;
}
.butonn
{
 text-decoration:none;
 color:#fff;
 font-weight:bold;
}
.kutu a
{
 text-decoration:none;
 color:#ff9900;
}
</style>

ardından scriptimizi yazıyoruz

<script type="text/javascript">
 $(document).ready(function(){
 $(".kutu").hide() /*açılışta kutumuzun kapalı şekilde olması için gizliyoruz*/

 $(".butonn").click(function(){
      $(".kutu").slideToggle('normal'); /*animasyonu burada gerçekleştiriyoruz normal fast slow şeklinde kullanabiliriz*/
 });
 /* div içindeki kapat butonu eğer toggle şeklinde kullanılmıyacaksa bunu kullanabiliriz*/
 $(".kapa").click(function()
 {
      $(".kutu").slideUp('fast');
 });

 });

</script>

projenin bitmiş halini buradan görebilirsiniz…