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