animateで横からヒョイと出てくるメニューの作り方（jquery,css）

animateでできるこんな感じのやつ。カーソルを画面端に持って行くと、メニューが表示され、メニュー上からマウスアウトするとメニューが閉じるってやつ。

javascript

$(function(){

  var _manage_box_flag = 0;   // 1:moving 0:stop

  function initialPosition(){

    $("#manage-box").css({
      top : 0,
      left : 0,
      marginLeft: "-" + ($("#manage-box").width() +22)+ "px" 
    });
  }

  //マウスが動いた時の処理
  $("body").mousemove(function( event ){

    //メニューを画面に表示させる
    if(event.pageX < 10 && _manage_box_flag == 0){
       _manage_box_flag = 1;
      $("#manage-box").animate({
            //メニューを右へ動かす
          'marginLeft': "0px"
      }, 300, function() {
         _manage_box_flag = 0;
      });

      //メニューを画面から消す
      }else if(event.pageX > 100 && _manage_box_flag == 0){
         _manage_box_flag = 1;
        $("#manage-box").animate({
            //メニューを左へ動かす
            'marginLeft': "-" + ($("#manage-box").width() +22)+ "px"
        }, 300, function() {
          _manage_box_flag = 0;
        });
      }
    });
      
    $(window).resize(function(){
      initialPosition();
    });            

    initialPosition();

});

css

#manage-box{
width:150px; //メニューの横幅
padding:10px;
height:100%;
overflow: auto;
position: fixed;
//白の半透明
background-color:rgba(255,255,255,0.9);
//ボックスシャドウにしたい場合
box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.2) inset, 0 8px 5px -4px rgba(0, 0, 0, 0.1); 
border:1px solid #dcdcdc;
}

html

<div id="manage-box">
  <h3>タイトル</h3>
  <ul>
     <li>メニュー1</li>
     <li>メニュー2</li>
     <li>メニュー3</li>
   </ul>
   <h3>タイトル</h3>
   <ul>
     <li>メニュー1</li>
     <li>メニュー2</li>
     <li>メニュー3</li>
   </ul>
</div>