シンプルなハンバーガーメニューを設置するjQueryプラグイン「hamburger-menu.js」

レスポンシブデザインでは、PC用のグローバルナビゲーションがスマホ表示時に入りきらなくなることが多いので、三本線のボタン（ハンバーガーメニュー）を設置し、クリック時にグローバルナビゲーションを表示するのが一般的です。

そのハンバーガーメニューを設置するためのjQueryプラグインです。

１．デモ

Demo

２．設置

手順１　「hamburger-menu.js」のダウンロード

以下のリンク先よりファイルをダウンロードしてください。

hamburger-menu on Github

手順２　「hamburger-menu」用ファイルの配置

ダウンロードした圧縮ファイルを展開し、「dist」フォルダ内の「hamburger-menu.js」を「js」フォルダ内に、「hamburger-menu.css」を「css」フォルダ内に配置してください。

手順３　スクリプト読み込みコードの記述

（1）jQueryの読み込み

jQuery本体を読み込みます。
※すでに読み込み済みの場合には不要です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

（2）hamburger-menu.cssの読み込み

<link rel="stylesheet" href="css/hamburger-menu.css">

（3）hamburger-menu.jsの読み込み

<script src="js/hamburger-menu.js"></script>

手順４　「メニューボタン」と「ナビゲーション」構造の追加

以下のコードを参考に「メニューボタン」と「ナビゲーション」の構造を追加します。

<!-- ハンバーガーメニュー -->
<button class="hamburger-button"></button>

<!-- ナビゲーション -->
<nav class="hamburger-nav">
  <ul>
    <li><a href="#">メニュー１</a></li>
    <li><a href="#">メニュー２</a></li>
    <li><a href="#">メニュー３</a></li>
    <li><a href="#">メニュー４</a></li>
  </ul>
</nav>

３．オプション設定

「hamburger-menu.js」をエディタで開き編集することで、オプション項目を変更できます。

/* オプション設定 */
const options = {
  slide: 'top', /* スライド方向（none, top, bottom, left, right） */
  duration: 300, /* 表示アニメーション速度（ms） */
  weight: 'regular', /* アイコン太さ（regular, light, solid） */
  dark: true, /* 画面の暗転（true, false） */
};

４．デザイン変更

デフォルトのCSSスタイルを上書きすることによってデザインを変更してください。

(1) アイコンの色を変更したい場合

.hamburger-button path {
  fill: red;
}

(2) media queryを用いて、レスポンシブ対応させる場合

/* PC時には非表示 */
.hamburger-button {
  display: none;
}
/* スマホ表示時 */
@media screen and (max-width:480px) {
  .hamburger-button {
    display: flex;
  }
}

(3) その他、使いそうなセレクタ

/* メニューボタン */
.hamburger-button {}
/* アイコン */
.hamburger-button svg {}

/* ナビゲーション */
.hamburger-nav {}