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

	
$(function(){
  var menu = $('#slide_menu'), // スライドインするメニューを指定
  menuBtn = $('#button'), // メニューボタンを指定
  body = $(document.body),     
  menuWidth = menu.outerWidth() + 20;                
  
  $(menu).css({
  	"position": "fixed",
  	"left": -menuWidth,
  	"top": "0"
  });
  // メニューボタンをクリックした時の動き
  menuBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
    if(body.hasClass('open')){
      // open クラスが body についていたらメニューをスライドインする
      body.animate({'left': menuWidth}, 500);            
      menu.animate({'left': 0}, 500);
      $(menuBtn).text("close");
    } else {
      // open クラスが body についていなかったらスライドアウトする
      menu.animate({'left': -menuWidth}, 500);
      body.animate({'left': 0}, 500);
      $(menuBtn).text("open");
    }
  });
  $(menu).click(function(){
  	menu.animate({"left": -menuWidth}, 500);
  	body.animate({"left": 0}, 500);
  	menuBtn.text("open");
  	body.addClass("open");
  });
});