横に開くドロワーメニュー：Drawer Slide Menu

スマホサイトのメニューによくある、左から開くコンテンツ。

Drawer Slide Menu で作りました。

• Drawer Slide Menu

こちらの「Download」からダウンロードして、
「jquery.mobile-menu.js」をheaderに記述（JQueryとともに）。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.mobile-menu.js"></script>

bodyにボタンと、左側の中身を記述

<!-- トリガーボタン -->
<div id="slide_btn"></div>

<!-- 開閉メニューの中身 -->
<div id="sllide_menu">
     <nav>
          <ul>
               <li><a href="index.html">メニュー</a></li>
               <li><a href="index.html">メニュー</a></li>
               <li><a href="index.html">メニュー</a></li>
               <li><a href="index.html">メニュー</a></li>
          </ul>
     </nav>
</div>

トリガーボタン（#slide_btn）をポチったら、左からドロワーメニュー（#sllide_menu）がスライドされる。

<script>
$(function(){
     $("body").mobile_menu({
          prepend_button_to: '#slide_btn',
          menu: ['#sllide_menu nav']
     });
});
</script>

こちらデモ。

• Demo