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

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

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

1.デモ

Demo

2.設置

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

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

hamburger-menu on Github

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

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

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

(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>

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

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

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

<!-- ナビゲーション -->
<nav class="hamburger-nav">
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
  </ul>
</nav>

3.オプション設定

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

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

4.デザイン変更

デフォルトの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 {}

コメントを残す

メールアドレスが公開されることはありません。