JQuery İle Akordiyon Menü Yapımı

Bu dersimizde JQuery ile akordiyon menü yapımını anlatacağım. Derse başlamadan önce sizlere son halini göstereyim.

See the Pen YWYZBV by Zahid Efe (@efezahid) on CodePen.16373

Yazıya devam etmeden önce isterseniz bu konu hakkında çektiğim videolu dersi de izleyebilirsiniz.

Şimdi iskeletimizi oluşturalım. İskeletimiz aynen şu şekilde olacak.

div kapsayıcı
    ul menü elemanlarının bulunacağı liste
        li
            h4 eleman başlığımız
            p elemanın içeriği

İskeletimizin HTML kodları aşağıdaki gibi olmalı.

<div class="accordion">
  <ul>
    <li>
      <h4 class="title">Element Title #1</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </li>
    <li>
      <h4 class="title">Element Title #2</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </li>
    <li>
      <h4 class="title">Element Title #3</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </li>
    <li>
      <h4 class="title">Element Title #4</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </li>
    <li>
      <h4 class="title">Element Title #5</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </li>
    <li>
      <h4 class="title">Element Title #6</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </li>
  </ul>
</div>

Li’lerin sayısını siz istediğiniz kadar artırabilirsiniz artık. Onlar bizim menü elemanlarımız olacak. Şimdi de sıra birazcık süslemeye geldi. Azcık CSS kodu yazarak menümüzü çok daha güzel hale getirebiliriz.

* {
    padding:0;
    margin:0;
}
.accordion {
    width:550px;
    margin:50px auto;
}
ul {
    list-style:none;
}
ul li h4 {
    border:1px solid #ddd;
    padding:15px;
    cursor:pointer;
}
ul li p {
    display:none;
    padding:15px;
}

Menümüze daha güzel bir görünüm kazandırdığımıza göre şimdi asıl meseleye gelebiliriz. Bu menümüz nasıl çalışacak.

$(function() {
    $(".title").on("click", function() {
        $("ul li p").stop().slideUp();
        $(this).next("p").stop().slideToggle();
    })
    $("ul li p").attr("align", "justify"); // Sadece güzel görünmesi için
})

Şimdi teker teker hangi satırın ne işe yaradığından bahsediyim. Öncelikle ilk satırımızda sayfamız hazır olduğunda JQuery kodlarımızı çalıştırması gerektiğini söylüyoruz.

İkinci satırımızda $(“.title”).on(“click” diyerek title sınıfına sahip nesneye tıklanma olayını yakalıyoruz ve diyoruz ki eğer o nesneye bir tıklanma olayı olursa şunları şunları yap. Şimdi neler yaptırmak istediğimize bakalım.

Öncelikle stop().slideUp satırında bütün ul li’ler içerisindeki p nesnelerini seçiyoruz, herhangi bir animasyon o anda oynatılıyorsa o animasyonu stop() diyerek durduruyoruz ve daha sonra da slideUp fonksiyonu ile kapanmasını sağlıyoruz. Yani herhangi bir başlığa tıkladığımızda o an görünür olan bütün paragrafları animasyonlu bir şekilde kapatacak.

Şimdi bir sonraki satıra geçelim. Burada da önce this nesnesini seçiyoruz, burada this ifadesi tıkladığımız nesneyi temsil ediyor. Yani bizim tıkladığımız .title elementini seçiyoruz. next fonksiyonu ile bu title elementinden bir sonraki herhangi bir nesneyi seçebiliriz. Biz de next(“h4”) diyerek .title elementinden sonra gelen h4 nesnesini seçiyoruz ve o an çalışmakta olan bütün animasyonlarını durdurmasını ve daha sonra da animasyonlu bir şekilde aşağı doğru açılmasını söylüyoruz. İşte tüm yaptığımız şey bu.

İsterseniz kaynak kodu buradan indirebilirsiniz => JQuery Akordiyon Menü Kaynak Kodları

Bu derslik bu kadar, desteklerinizi esirgemezseniz çok sevinirim. Herkese kolay gelsin.

JQuery Mustafa Zahid Efe Yorum Yapılmamış