jquery ile accordion menü yapımı

Merhaba arkadaşlar ,
bugün bir önceki makalede açıkladığımız Jquery nin efekkleri ile basit bir accordin kontolü yapıyor olacağız.
Bu yazıda fazla lafı uzatmadan hemen icraata geçmek istiyorum.

Accoridon kontolümüzün html i aşağıdaki gibi.
 

<h1 class="accoridonh1">Vizyondaki Filmler</h1>
  <div class="accordioncontainer">
  <div class="accordionheader">Kaledeki Yalnızlık</div>
  <div class="accordioncontent">
  
<h1 class="accoridonh1">Filmin Özeti</h1> 
Futbol üzerine kurgulanmış bir film gibi görünse de içinde barındırdığı aile ilişkileri, yoksulluk, çaresizlik ve geçmişle hesaplaşmalar nedeniyle naif bir 'kaybetmiş adam' hikayesidir aynı zamanda. Kadrosu ile her karede izleyiciye oyunculuk ziyafeti vadeden bu film, eşini kendi kullandığı arabada yaptığı trafik kazasında kaybetmesi ile bir anlamda hayata küsen bir babanın da öyküsüdür. 

Maddi sıkıntılardan kurtulmak için babanın başvurduğu ihanet ve gurur öğelerinin yumuşak bir örgü ile iç içe sunulduğu film, varoşlarda yaşanan alt kültürü mümkün olan en sade dille yansıtıyor. Nurettin (Numan Çakır), futbolda parlak dönemler yaşarken geçirdiği trafik kazası sonucu hem eşini hem de geleceğini kaybetmiştir. Onu hayata bağlayan tek neden oğlu Feyyaz’dır (Tolga Sarıtaş). Nurettin, 3. Lige çıkma hayalleri kuran ve başkanlığını gayri işler yapan bir adamın yaptığı (Erkan Can) amatör takımında oynamaktadır Futbolda kale, dramatik bir bölgedir ve çoğunlukla kaleciler saha içinde yalnızlardır. 

Nurettin’in eniştesi (Menderes Samancılar) bir lunaparkta çalışmakta ve şans oyunları ile makus talihini değiştirmeyi düşlemektedir. Ablası (Nur Sürer) sıradan bir ev kadınıdır. Uzun yıllar sonra Almanya dan gelen Zenoş teyze (Özlem Tekin) Görüntüde uçuk bir 3. kuşak Almancı gibi görünse de sıcaklığı ile evde eksik olan rengi tamamlayacaktır. Ünlü futbolcu Ümit Karan, Zenoş teyzenin Almanya’dan çocukluk arkadaşıdır. Kale korunması gereken bir yapıdır. Kale düşerse kent de düşer. Kaledeki yalnızlık filmi, izlendikten sonra izleyicide olumlu duygular yaratacak ve büyük şehir koşuşturmasında unuttuğumuz pek çok insani değerleri yeniden anımsatacaktır. Filmi izlediğinizde TERS KÖŞE olacaksınız.
  </div>
  <div class="accordionheader">X-Men: First Class</div>
  <div class="accordioncontent">
 <h1 class="accoridonh1">Filmin Özeti</h1> 

2006-2007 yılları arasında, Jeff Parker tarafından yazılan ve 
Roger Cruz'un çizimlerini yaptığı X-Men: First Class çizgi roman serisinin bir uyarlaması olması beklenen filmde, kahramanlarımızın gençlik yıllarına gideceğiz.
  </div>
   <div class="accordionheader">Felekten Bir Gece 2</div>
  <div class="accordioncontent">
 <h1 class="accoridonh1">Filmin Özeti</h1> 
 Stu, fazlasıyla dağıttığı bir parti gecesinin sabahında,
 yatağında sürpriz bir travesti ile uyanıverir. Ertesi gün ekip toplanır ve geçen gece yenilen haltların tek tek izi sürülür.
  </div>
   <div class="accordionheader">Koğuş</div>
  <div class="accordioncontent">
 <h1 class="accoridonh1">Filmin Özeti</h1> 
 
Amber Heard psikolojik sorunları nedeniyle bir psikiyatri kliniğine gidiyor 
ve burada başka kadınlarla tanışıyor. Geceleri de gizemli bir konuk onları ziyaret etmeye başlıyor.
  </div>


  </div>

 Accordionun css kodlarıda aşağıdaki gibi.

 

<style type="text/css">
.accoridonh1 { color: red; font-family:Arial}
     .accordioncontainer
{
    width: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    display:block;
}
   .accordionheader
{
    padding: 10px;
    margin:5px;
   width:400px; 
    border: 1px solid #000000;
    font-size: 12px;
    font-weight: bold;
    background-color: #990000;
    color: #FFFFFF;
    cursor:pointer;    
    
}

 .accordionheaderhover
{
    padding: 10px;
    margin: 5px;
    width: 400px;
    border: 1px solid #000000;
    font-size: 12px;
    font-weight: bold;
    background-color: #003399;
    color: #FFFFFF;
    cursor: pointer;
}
.accordioncontent
{
    border: 1px solid #800000;
    display: none;
   padding: 10px;
    margin:5px;
   width:400px; 
 }
   </style>

Şimdi de Javascirpt Kodlarımız.

 

<script type="text/javascript" language="javascript">



        $(document).ready(function () { // htm dokumanı hazır olduğunda yani tüm html yüklendiğinde javascript kodlarının çalışmasını sağlayan kod bloğumuz. Bu javascirptdeki window.onload a karşılık gelir.

            // Açıklama : toggleClass slidelardaki mantıkla çalışıarak seçilen elementin css classını değiştirir. 
            // seçilen elementin class a ise b yapar b ise a yapar yani addClass ve reomeClass ı aynı element üzerinde sırayla çalıştırır.

            $(".accordionheader").click(function () { // accordion un başlık divlerine tıklandığında yaplcak fonksiyonu yazıyoruz.
                $(this).next("div").slideToggle(500).siblings("div.accordioncontent").slideUp(500); // tıklanan div in kendinden bi önceki elementi seçiyoruz ve slideToggle ile
                //  yarım saniyede  gizle/göster yapıyoruz. daha sonrada sibling() komutu ile seçtiğim accordioncontent div i ile aynı seviyedeki tüm diğer divleri deçip hepsini kapatıyoruz, böylece herhangi bir başlığa tıklandığında açık olan diğer accordion lar kanacak. 
                $(this).toggleClass("accordionheaderhover").siblings("div.accordionheaderhover").removeClass("accordionheaderhover").addClass("accordionheader"); // burada da iye aynı mantıkla
                // tıkladığımız başlık divinin classını toggleClass methodu ile değiştiryioruz ve sonra aynı seviyedi tüm diğer accordionheaderhover class lı elementlerin o değerini silip yerine accordionheader classını ekliyoruz.   
                
            })
        });
    </script>


ve bitti.... Çalışan örneği aşağıdan görebilirsiniz.

Vizyondaki Filmler

Kaledeki Yalnızlık

Filmin Özeti

Futbol üzerine kurgulanmış bir film gibi görünse de içinde barındırdığı aile ilişkileri, yoksulluk, çaresizlik ve geçmişle hesaplaşmalar nedeniyle naif bir 'kaybetmiş adam' hikayesidir aynı zamanda. Kadrosu ile her karede izleyiciye oyunculuk ziyafeti vadeden bu film, eşini kendi kullandığı arabada yaptığı trafik kazasında kaybetmesi ile bir anlamda hayata küsen bir babanın da öyküsüdür. Maddi sıkıntılardan kurtulmak için babanın başvurduğu ihanet ve gurur öğelerinin yumuşak bir örgü ile iç içe sunulduğu film, varoşlarda yaşanan alt kültürü mümkün olan en sade dille yansıtıyor. Nurettin (Numan Çakır), futbolda parlak dönemler yaşarken geçirdiği trafik kazası sonucu hem eşini hem de geleceğini kaybetmiştir. Onu hayata bağlayan tek neden oğlu Feyyaz’dır (Tolga Sarıtaş). Nurettin, 3. Lige çıkma hayalleri kuran ve başkanlığını gayri işler yapan bir adamın yaptığı (Erkan Can) amatör takımında oynamaktadır Futbolda kale, dramatik bir bölgedir ve çoğunlukla kaleciler saha içinde yalnızlardır. Nurettin’in eniştesi (Menderes Samancılar) bir lunaparkta çalışmakta ve şans oyunları ile makus talihini değiştirmeyi düşlemektedir. Ablası (Nur Sürer) sıradan bir ev kadınıdır. Uzun yıllar sonra Almanya dan gelen Zenoş teyze (Özlem Tekin) Görüntüde uçuk bir 3. kuşak Almancı gibi görünse de sıcaklığı ile evde eksik olan rengi tamamlayacaktır. Ünlü futbolcu Ümit Karan, Zenoş teyzenin Almanya’dan çocukluk arkadaşıdır. Kale korunması gereken bir yapıdır. Kale düşerse kent de düşer. Kaledeki yalnızlık filmi, izlendikten sonra izleyicide olumlu duygular yaratacak ve büyük şehir koşuşturmasında unuttuğumuz pek çok insani değerleri yeniden anımsatacaktır. Filmi izlediğinizde TERS KÖŞE olacaksınız.
X-Men: First Class

Filmin Özeti

2006-2007 yılları arasında, Jeff Parker tarafından yazılan ve Roger Cruz'un çizimlerini yaptığı X-Men: First Class çizgi roman serisinin bir uyarlaması olması beklenen filmde, kahramanlarımızın gençlik yıllarına gideceğiz.
Felekten Bir Gece 2

Filmin Özeti

Stu, fazlasıyla dağıttığı bir parti gecesinin sabahında, yatağında sürpriz bir travesti ile uyanıverir. Ertesi gün ekip toplanır ve geçen gece yenilen haltların tek tek izi sürülür.
Koğuş

Filmin Özeti

Amber Heard psikolojik sorunları nedeniyle bir psikiyatri kliniğine gidiyor ve burada başka kadınlarla tanışıyor. Geceleri de gizemli bir konuk onları ziyaret etmeye başlıyor.


Kolay gelsin.

 

Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat