jQuery

【jQuery】スマホサイトにオススメ!ドロワーメニュースクリプトDrawer Menu with CSS Animations

September 3, 2014

スマホサイトなどでよく使われているドロワーメニュー。
トリガーをクリックしたらアクションが発生し、CSSアニメーションを使用して横からメニューを表示させるあれが実装できるスクリプト。

DEMOに紹介されているのはベーシックなレフト、ライトとレスポンシブ用。
対応ブラウザーはIE 10,chrome,Firefox,opera,Mac safari,iOS7 safar,iOS7 chrome

ライセンスはMIT license.

CSS・JS

<!-- drawer css -->
<link rel="stylesheet" href="./css/drawer.min.css">

<!-- jquery & iscroll & dropdown -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script>
<script src="//cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.1/dropdown.min.js"></script>

<!-- drawer js -->
<script src="./dist/js/jquery.drawer.min.js"></script>

HTMLマークアップ

<body class="drawer drawer-right">

  <header role="banner">
  <div class="drawer-header">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
  </div>

  <div class="drawer-main drawer-default">
    <nav class="drawer-nav" role="navigation">
      <div class="drawer-brand"><a href="./">drawer</a></div>

      <ul class="drawer-menu">
        <li class="drawer-menu-item"><a href="./base">base</a></li>
      </ul>

      <div class="drawer-footer"><span></span></div>
    </nav>
  </div>
  </header>

  <div class="drawer-overlay">
  <!-- content -->
  </div>

</body>

Drawerを読み込む

$(document).ready(function() {
  $(".drawer").drawer();
});