jQueryライブラリDrawerのコピペでできるドロワーメニュー

2021年1月24日2022年2月23日 4分

jQueryライブラリのDrawerは、スマホでよく見かける「ドロワーメニューを簡単に実装できるプラグインで、WordPressのテーマにも導入することが容易でできます。

今回は、jQueryライブラリDrawerのコピペでできるドロワーメニューについてご紹介します。

jQueryライブラリDrawerとは？
Drawerの実装サンプル
Drawerの導入手順
コードサンプル一式
ドロワーのネイティブなJavaScriptでのスニペット

jQueryライブラリDrawerとは？

jQueryライブラリのDrawerは、ボタンをクリックすると横からスライドして出すことができるプラグインです。

Drawerはレスポンシブデザインにも対応しており、表示されたメニューの高さがウィンドウの高さを超える場合、独立してスクロールします。

利用する際には、jQueryとiScrollというjQueryプラグインもセットで読み込ませる必要があります。

Drawerの実装サンプル

Drawerを使用したメニューのサンプルです。

以下のボタンをクリックすると、左上からメニューが表示されますが、右上から表示させるのも簡単にできます。

Drawerの導入手順

「フォーム」と「レイアウトテンプレート」のメニューを使用して作成します。

STEP.1

jQueryの記述

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO

当サイトでは以下のjQueryを使用しています。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

上記のような記述が、htmlファイルの

<head></head>

の中に無い場合その中へ貼り付けましょう。

STEP.2

必要なファイルの記述

Drawerで必要なファイルをHTMLで記述しまします。
必要なファイルは全てCDNで配信されているので、以下をコピペするだけでOKです。

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

CSSのdrawer.min.cssは必須ではありませんが、drawer.jsとiscroll.jsは必ず記述するようにしましょう。

STEP.3

HTMLを記述

任意の場所に、ドロワーのHTMLを記述します。

Drawerの挙動は、CSSのdrawer.cssに紐づけられているので、class名はそのままコピペするようにしましょう

HTML

<body class="drawer drawer--left">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
</body>

STEP.4

JavaScriptのコードを記述

JavaScriptのコードを<body>のクロージングタグ</body>の直前に記述をすれば、設置完了です。

jQuery

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

コードサンプル一式

HTMLとJavaScriptのコードは色々といじることで、仕様を変更することができます。

以下のHTMLのコードは公式サイトの標準のままで、JavaScriptにパラメータを付けたコードです。

コードを表示する

HTML

<body class="drawer drawer--left">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
</body>

jQuery

$(document).ready(function() {
$('.drawer').drawer({
  class: {
    nav: 'drawer-nav',
    toggle: 'drawer-toggle',
    overlay: 'drawer-overlay',
    open: 'drawer-open',
    close: 'drawer-close',
    dropdown: 'drawer-dropdown'
  },
  iscroll: {
    // Configuring the iScroll
    // https://github.com/cubiq/iscroll#configuring-the-iscroll
    mouseWheel: true,
    preventDefault: false
  },
  showOverlay: true
});
});