jQuery Tab Menü Yapımı

Yazıda jQuery ile tab menü yapımı veya tarayıcılarda sıklıkla kullanılan sekme yapımı adım adım anlatılmıştır.

jQuery içerisinde bulunan hazır metotlar, çeşitli uygulamaların kolay ve hızlı bir şekilde yapılmasını sağlar.

Tab menü yapımı için iyi bir yapı oluşturmak jQuery ile yazılacak kod miktarını azaltacaktır.

<div id="tabmenu">

  <ul class="sekme">
    <li class="aktif">Sekme 1</li>
    <li>Sekme 2</li>
    <li>Sekme 3</li>
    <li>Sekme 4</li>
    <li>Sekmet 5</li>
  </ul>

  <div class="icerik">
    <p>Sekme 1 içeriği</p>
  </div>
  <div class="icerik">
    <p>Sekme 2 içeriği</p>
  </div>
  <div class="icerik">
    <p>Sekme 3 içeriği</p>
  </div>
  <div class="icerik">
    <p>Sekme 4 içeriği</p>
  </div>
  <div class="icerik">
    <p>Sekme 5 içeriği</p>
  </div>

</div>

Yapı yukarıdaki gibi basit oluşturulduktan sonra gerekli stil tanımlamaları yapılarak tab menünün daha iyi görünmesi sağlanır.

<style>
  * {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  #tabmenu {
    width: 500px;
    background-color: #f9f9f9;
  }

  .sekme {
    font-size: 0;
    background-color: #dddddd;
  }

  .sekme li {
    font-size: 17px;
    list-style: none;
    display: inline-block;
    padding: 10px;
  }

  .sekme li.aktif,
  .sekme li:hover {
    background-color: #f0f0f0;
    cursor: pointer;
  }

  .icerik {
    padding: 20px 10px;
  }
</style>

Yapacağımız tab menü için gerekli olan yapıyı hazırladıktan sonra jQuery kodlarına geçebiliriz.

İlk olarak görünen tüm sekme içeriklerini gizleyelim ve daha sonra sadece ilk sekmeyi görünür yapalım.

<script>
"use strict";
  $(function() {
    $("#tabmenu .icerik").hide();
    $("#tabmenu .icerik").first().show();
  });
</script>

Bu işlemi daha kısa yollarla yapabiliriz.

Ancak konunun anlaşılması için bu yöntemi kullanalım 🙂

Sekmelerden herhangi birine tıklandığında tıklanan sekmenin içeriğini göstermek için sekmelere tıklama olayı (click) ekliyoruz.

<script>
"use strict";
  $(function() {
    $("#tabmenu .icerik").hide();
    $("#tabmenu .icerik").first().show();

    $("#tabmenu .sekme li").on("click", function() {
      let sira = $(this).index();
    });
  });
</script>

Tıklanan elemanın sıra numarasını almak için index metodu kullanılır.

<script>
"use strict";
  $(function() {
    $("#tabmenu .icerik").hide();
    $("#tabmenu .icerik").first().show();

    $("#tabmenu .sekme li").on("click", function() {
      let sira = $(this).index();

      $("#tabmenu .icerik").hide();
      $("#tabmenu .icerik").eq(sira).show();
    });
  });
</script>

Sıra numarasını aldıktan sonra tüm sekme içeriklerini gizliyor ve daha sonra tıklanan sekmenin sıra numarasına ait sekme içeriğini göstermek için eq metodunu kullanıyoruz.

Hangi sekmenin açık olduğunu kullanıcıya bildirmek için öncelikle tüm sekmelerden aktif CSS sınıfını siliyoruz ve daha sonra tıklanan sekmeye aktif CSS sınıfını ekliyoruz.

<script>
"use strict";
  $(function() {
    $("#tabmenu .icerik").hide();  // tüm sekme içeriklerinin gizledik
    $("#tabmenu .icerik").first().show();  // ilk sekme içeriğini gösterdik

    $("#tabmenu .sekme li").on("click", function() {
      let sira = $(this).index();  // sıra numarasını aldık

      $("#tabmenu .icerik").hide();  // tüm sekmeleri gizledik
      $("#tabmenu .icerik").eq(sira).show();  // tıklanan sekme içeriğini gösterdik
      
      $("#tabmenu .sekme li").removeClass("aktif");  // tüm sekmelerden aktif sınıfını kaldırdık
      $(this).addClass("aktif");  // tıklanan sekmeye aktif sınıfını ekledik
    });
  });
</script>

Sekme içeriğinin gösterilmesi ve gizlenmesi sırasında çeşitli jQuery efektleri (fadeIn, slideDown) uygulayarak tab sisteminin daha güzel görünmesi sağlanabilir.

Hayırlı günler dilerim.