ハンバーガーメニュー jquery コピペ

ハンバーガーメニューをjQueryで実装！コピペで動くサンプルコード付き【初心者向け】

この記事では、ウェブサイト制作でよく使われるハンバーガーメニューをjQueryを使って簡単に実装する方法を、初心者の方向けに解説します。コピペで使えるサンプルコードと詳しい解説で、誰でも簡単に設置できます。

1. ハンバーガーメニューとは？

スマートフォンサイトでよく見る、3本線のアイコンをクリックするとメニューが開くUI
画面を広く使えるので、多くの情報を持つサイトに最適
ユーザービリティ向上に繋がる

2. jQueryでハンバーガーメニューを実装するメリット

シンプルなコードで実装できる
アニメーション効果を簡単に追加できる
初心者でも扱いやすい

3. コピペで動く！ハンバーガーメニューの実装方法

3.1 HTMLの記述

まずは、ハンバーガーメニューのHTML構造を記述します。下記のサンプルコードをコピーして、HTMLファイルに貼り付けてください。


<header>
  <div class="container">
    <h1><a href="#">サイト名</a></h1>
    <div class="menu-trigger">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <nav id="global-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">会社概要</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>

3.2 CSSの記述

次に、ハンバーガーメニューのデザインを設定します。下記のサンプルコードをコピーして、CSSファイルに貼り付けてください。


/* ハンバーガーメニュー */
.menu-trigger {
  display: none;
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: relative;
}

.menu-trigger span {
  display: block;
  height: 2px;
  background-color: #333;
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.menu-trigger span:nth-child(1) {
  top: 15px;
}

.menu-trigger span:nth-child(2) {
  top: 25px;
}

.menu-trigger span:nth-child(3) {
  top: 35px;
}

/* メニュー */
#global-nav {
  display: block;
}

#global-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#global-nav li {
  margin: 0;
  padding: 0;
}

#global-nav a {
  display: block;
  padding: 15px 0;
  text-decoration: none;
  color: #333;
}

/* スマホサイズ以下でハンバーガーメニューを表示 */
@media screen and (max-width: 768px) {
  .menu-trigger {
    display: block;
  }

  #global-nav {
    display: none;
  }

  /* メニューが開いた時のスタイル */
  .open #global-nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
  }

  .open .menu-trigger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .open .menu-trigger span:nth-child(2) {
    opacity: 0;
  }

  .open .menu-trigger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }
}

3.3 jQueryの記述

最後に、jQueryを使ってクリックイベントを設定し、メニュー表示の切り替えを実装します。下記のサンプルコードをコピーして、jQueryファイルに貼り付けてください。


$(function() {
  $('.menu-trigger').on('click', function() {
    $(this).toggleClass('open');
    $('#global-nav').toggleClass('open');
  });
});

4. さらに便利に！オプション機能の実装

上記をベースに、さらにハンバーガーメニューを便利にするオプション機能を紹介します。

機能	説明
スクロールに合わせて表示を切り替える	ページ最上部ではハンバーガーメニューを非表示にし、スクロールすると表示させる
メニュー表示時に背景を暗くする	メニューが開いた際に、背景を暗くしてメニューを目立たせる
アニメーション効果を追加する	メニューの開閉にアニメーション効果を追加して、動きを滑らかにする

5. まとめ

jQueryを使えばハンバーガーメニューを簡単に実装できます。本記事のサンプルコードを参考に、自分だけのオリジナルメニューを作成してみましょう。

参考文献

jQuery API Documentation

この記事に関するQ&A

Q1: jQueryを読み込むのを忘れてしまいました。

A1: <head> タグ内に下記のコードを追加して、jQueryを読み込んでください。（バージョンは適宜変更してください）


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

Q2: ハンバーガーメニューの色を変えたいです。

A2: CSSファイルの `background-color` プロパティを変更してください。例えば、赤色にする場合は下記のように記述します。


.menu-trigger span {
  background-color: red;
}

Q3: メニューの表示速度を遅くしたいです。

A3: CSSファイルの `transition` プロパティの秒数を変更してください。例えば、1秒にする場合は下記のように記述します。


.menu-trigger span {
  transition: all 1s ease-in-out;
}

その他の参考記事:ハンバーガーメニュー jquery