jQuery/スライドインメニュー

	
$(function(){
  var slideMenu = $("#slideMenu");
  var downMenu = $("#downMenu");
  var fadeMenu = $("#fadeMenu");
  var slideBtn = $('#slideBtn');
  var downBtn = $("#downBtn");
  var fadeBtn = $("#fadeBtn");
  var body = $(document.body);     
  slideMenuWidth = slideMenu.outerWidth();
  downMenuHeight = downMenu.outerHeight();

  slideBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
    if(body.hasClass('open')){
      // open クラスが body についていたらメニューをスライドインする
      slideMenu.animate({'left': slideMenuWidth - 100}, 400);
      downMenu.animate({'top': -downMenuHeight}, 400);
      fadeMenu.fadeTo("slow", 0);              
    } else {
      // open クラスが body についていなかったらスライドアウトする
      slideMenu.animate({'left': -slideMenuWidth}, 400);
    }             
  });
  
   downBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
    if(body.hasClass('open')){
      // open クラスが body についていたらメニューをスライドインする
      downMenu.animate({'top': downMenuHeight - 100}, 400);
      slideMenu.animate({'left': -slideMenuWidth}, 400);
      fadeMenu.fadeTo("slow", 0);
    } else {
      // open クラスが body についていなかったらスライドアウトする
      downMenu.animate({'top': -downMenuHeight}, 400);
    }
  });
  
  fadeBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
    if(body.hasClass('open')){
      // open クラスが body についていたらメニューをスライドインする
      fadeMenu.fadeTo("slow", 0.9);
      downMenu.animate({'top': -downMenuHeight}, 400);
      slideMenu.animate({'left': -slideMenuWidth}, 400);
    } else {
      // open クラスが body についていなかったらスライドアウトする
      fadeMenu.fadeTo("slow", 0);
    }
  });
});