Akordeon Menü ile Tab Uygulaması Birlikte

Geçende bir projede böyle bir uygulama yapmak durumunda kaldım. Projede kayan menü olacak ve bu kayan menüdeki bağlantılara tıklandığı zaman içerik “kaybolma” efektiyle görünecek.

İnternette böyle bir uygulama göremedim. Ben de madem öyle kendim yazayım dedim. Uygulamada jQuery kütüphanesi kullandım. Javascriptte fazla bir tecrübem yok ama iyi bir sonuç elde edebildim. Bunu da sizinle paylaşmak istedim. Belki sizin projelerinize fikir kaynağı olabilir ya da üzerinde değişiklik yapıp geliştirebilirsiniz.

jQuery(document).ready(function() {

  // .menuButton'a tıklandığı zaman
  $('.menuButton').click(function() {
  
    // .button ve .menuButton'dan 'selected' sınıfını siler
    $('.button, .menuButton').removeClass('selected');

    // eğer .menuButton'dan sonraki içerik gizliyse
    if ($('.menuButton').next().is(':hidden')) {
    
      // .menuContent sınıfına sahip elementleri 'slideUp' efektiyle normal hızda kapatır
      $('.menuContent').slideUp('normal');
      
      // .menuButton'a 'selected' sınıfını ekler
      $(this).addClass('selected');
      
      // .menuButton'dan sonraki elementi 'slideDowm' efektiyle normal hızda açar
      $(this).next().slideDown('normal');
     }

     // eğer .noTabAction sınıfına sahip değilse
     if ($(this).hasClass("noTabAction") == false) {
     
      // tıklanan 'a'nın hedefini bul
      var selectedTab = $(this).find('a').attr("href");
      
      // .tabContent sınıfına sahip olanları kapatıp 'a'nın hedefindeki sekmeyi 'fadeIn' efektiyle aç
      $(".tabContent").hide().filter(selectedTab).fadeIn();
    }

    // 'a'nın hedefine gitmesini engeller. çünkü zaten bir üstte onu açtık
    return false;
   });

  // alt listedeki butonlara tıklandığı zaman
  $('.button').click(function() {
  
    // tıklanan 'a'nın hedefini bul
    var selectedTab = $(this).find('a').attr("href");
    
    // .tabContent sınıfına sahip olanları kapatıp 'a'nın hedefindeki sekmeyi 'fadeIn' efektiyle aç
    $(".tabContent").hide().filter(selectedTab).fadeIn();
    
    // .button ve .menuButton sınıfına sahip olan elementlerin 'selected' sınıfını siler tıklanana ekler
    $('.button, .menuButton').removeClass('selected').filter(this).addClass('selected');
    
    return false;
  });

  // .menuContent sınıfına sahip olan elementleri gizler.
  $('.menuContent').hide();

  // .menuContent sınıfına sahip olan elementleri gizler; sadece ilkini gösterir
  $(".tabContent").hide().filter(':first').show();
});

Örnek

  • uygulama için teşekkürler , bende internetten aradım ve sonunda burda buldum 🙂

  • xgen

    Bir örnek demo koysan da işe yarayıp yaramadığını anlasak.

    • Kodların hemen altındaki “Örnek” bağlantısını görmedin heralde!

  • Öncelikle teşekkürler harika bir döküman olmuş benimde uzun zamandır aradığım bir betik görünce çok sevindim tekrar tekrar ellerinize sağlık! Yanlız birşey sorucam explorer’de sayfalar arası geçişlerde 1 2 saniyelik buzlanma oluyor yazılarda sonra kendine geliyor bu durum nasıl aşılabilir ?

    • Teşekkürler Yiğit.

      Explorer’ın hangi sürümünü kullanıyorsun? IE7 ve IE8’de sorunsuz çalışıyor. Biraz önce de denedim. Ama IE6’da test etmedim. Eğer 7 veya 8 kullanıp bu sorunla karşılaşıyorsan yerel (local) bir problem olabilir.