Drawer Menu

ドロワーメニュー

Flexible drawer menu using
jQueryを使った簡単な「Drawer」を使って、ドロワーメニューを実装しましょう。3本ラインで表現している格納メニューは、「ハンバーガーメニュー」とも呼ばれています。

【プラグイン公式サイト】
http://git.blivesta.com/drawer/

ダウンロードすると、drawer-master.zipがDLされます。解凍すると、中に様々なファイルが収録されています。「sandbox」フォルダー内に、たくさんのサンプルがあり、簡単にナビゲーションがレスポンシブに対応することができます。

実装に必要なファイル

たくさんファイルが入っていますが、実際に必要なファイルは5つだけです。CSSとjsは、それぞれ専用のフォルダーへコピーペーストします。

/*CSSの場所を変更する*/
<link href="css/sandbox.css" rel="stylesheet">
<link href="css/drawer.min.css" rel="stylesheet">
<link href="css/drawer.css" rel="stylesheet">

/*CSSの場所を変更する*/

/*下記の記述は、body内(下部)に記述*/
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

/*配置を変更する*/
  <script src="js/drawer.min.js" charset="utf-8"></script>
  <script>
    $(document).ready(function() {
      $('.drawer').drawer();
    });
  </script>

/*下記の記述は、body内(下部)に記述*/

/*配置を変更する*/

$(document).ready(function() {

$('.drawer').drawer();

});

</script>

ヘッダーをカスタマイズして記述する

/*ボディにクラスを充てる*/
<body class="drawer drawer--left drawer--navbarTopGutter">
  <header class="drawer-navbar drawer-navbar--fixed" role="banner">
    <div class="drawer-container">
      <div class="drawer-navbar-header">
        <a class="drawer-brand" href="./index.html">有印良品</a>
        <button type="button" class="drawer-toggle drawer-hamburger">
          <span class="sr-only">toggle navigation</span>
          <span class="drawer-hamburger-icon"></span>
        </button>
      </div>

      <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu">
          <li><a class="drawer-menu-item" href="">ネットストア</a></li>
          <li><a class="drawer-menu-item" href="">イベント</a></li>
          <li><a class="drawer-menu-item" href="">暮らし研究所</a></li>
          <li>
            <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false" rel="noopener noreferrer">
              ビジョン <span class="drawer-caret"></span>
            </a>
           
          </li>
          <li class="drawer-dropdown">
            <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false" rel="noopener noreferrer">
             店舗情報 <span class="drawer-caret"></span>
            </a>
            <ul class="drawer-dropdown-menu">
              <li><a class="drawer-dropdown-menu-item" href="">東京</a></li>
              <li><a class="drawer-dropdown-menu-item" href="">関西</a></li>
              <li><a class="drawer-dropdown-menu-item" href="">九州</a></li>
            </ul>
          </li>
          <li>
            <a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
              お問い合わせ <span class="drawer-caret"></span>
            </a>
          </li>
        </ul>
      </nav>

    </div>
  </header>
</body>

/*ボディにクラスを充てる*/

<span class="sr-only">toggle navigation</span>

</button>

</div>

<li><a class="drawer-menu-item" href="">ネットストア</a></li>

<li><a class="drawer-menu-item" href="">暮らし研究所</a></li>

<li>

ビジョン <span class="drawer-caret"></span>

</a>

</li>

店舗情報 <span class="drawer-caret"></span>

</a>

</ul>

</li>

<li>

お問い合わせ <span class="drawer-caret"></span>

</a>

</li>

</ul>

</nav>

</div>

</header>

</body>