超簡単！jQueryでハンバーガーメニューを実装する方法【初心者向け】

ハンバーガーメニュー jquery 簡単

近年、スマートフォンやタブレット端末の普及に伴い、Webサイトを様々なデバイスで見やすく表示するレスポンシブWebデザインが主流となっています。レスポンシブWebデザインにおいて、重要な要素の一つがハンバーガーメニューです。この記事では、jQueryを使って、初心者の方でも簡単にハンバーガーメニューを実装する方法を、サンプルコード付きで丁寧に解説していきます。

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

ハンバーガーメニューとは、主にモバイルサイトでよく見かける、3本線のメニューボタンのことです。クリックすると、隠れていたナビゲーションメニューが表示される仕組みになっています。画面幅が狭いスマートフォンサイトでは、画面を広く使えるため、必須級の機能と言えるでしょう。

なぜjQueryを使うのか？

jQueryは、JavaScriptを簡潔に記述できるようにしたライブラリです。ハンバーガーメニューの実装には、JavaScriptを使用しますが、jQueryを使うことで、よりシンプルで分かりやすいコードを書くことができます。また、アニメーション効果なども簡単に実装できるため、初心者の方でも扱いやすいというメリットがあります。

jQueryでハンバーガーメニューを実装する方法

jQueryでハンバーガーメニューを実装する手順は以下の通りです。

HTMLでハンバーガーメニューとナビゲーションメニューをマークアップする
CSSでハンバーガーメニューとナビゲーションメニューのデザインを整える
jQueryでクリックイベントを設定し、ナビゲーションメニューの開閉処理を実装する

サンプルコードと解説

それでは、具体的なHTML、CSS、jQueryのコード例を見ていきましょう。

HTML


<header>
  <div class="container">
    <h1 class="logo"><a href="#">サイト名</a></h1>
    <div class="hamburger-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <nav class="global-nav">
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS


/* ハンバーガーメニュー */
.hamburger-menu {
  display: none; /* 初期状態では非表示 */
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: relative; /* 3本線の中央に配置するため */
}

.hamburger-menu span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #333;
  position: absolute;
  left: 10px; /* 3本線の中央に配置するため */
  transition: 0.3s; /* ホバー時のアニメーション */
}

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

.hamburger-menu span:nth-child(2) {
  top: 23px;
}

.hamburger-menu span:nth-child(3) {
  bottom: 15px;
}

/* ナビゲーションメニュー */
.global-nav {
  display: block; /* 初期状態では表示 */
}

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

.global-nav li {
  margin-bottom: 10px;
}

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

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

  .global-nav {
    display: none; /* ナビゲーションメニューを非表示 */
    position: absolute;
    top: 70px; /* ヘッダーの高さに合わせる */
    left: 0;
    width: 100%;
    background-color: #fff;
  }

  .global-nav.open { /* ハンバーガーメニュークリック時に表示 */
    display: block;
  }
}

jQuery


$(function() {
  $('.hamburger-menu').on('click', function() {
    $(this).toggleClass('open'); // ハンバーガーメニューの開閉状態を切り替える
    $('.global-nav').toggleClass('open'); // ナビゲーションメニューの開閉状態を切り替える
  });
});

解説

HTMLでは、ハンバーガーメニューを構成する3本の線を<span>タグで、ナビゲーションメニューを<nav>タグでマークアップしています。
CSSでは、ハンバーガーメニューとナビゲーションメニューのデザインを定義しています。スマホサイズ以下でハンバーガーメニューを表示し、ナビゲーションメニューは非表示にするように設定しています。また、ハンバーガーメニューがクリックされた際に、ナビゲーションメニューが表示されるように設定しています。
jQueryでは、ハンバーガーメニューがクリックされた際に、ハンバーガーメニューとナビゲーションメニューにopenクラスを付け外しすることで、表示状態を切り替えています。

さらにハンバーガーメニューをカスタマイズ

上記は基本的なハンバーガーメニューの実装方法ですが、jQueryを使えば、さらに様々なカスタマイズが可能です。

アニメーション効果の種類

jQueryでは、様々なアニメーション効果を簡単に実装することができます。例えば、ナビゲーションメニューの表示時に、フェードインやスライドインといったアニメーション効果を加えることができます。以下に、フェードインアニメーションの例を示します。


$(function() {
  $('.hamburger-menu').on('click', function() {
    $(this).toggleClass('open');
    $('.global-nav').fadeToggle(); // フェードイン・アウトで表示状態を切り替える
  });
});

メニューのデザインのバリエーション

ハンバーガーメニューのデザインは、CSSで自由に変更することができます。3本線の形や色、ホバー時のアニメーションなどをカスタマイズして、サイトのデザインに合わせたオリジナルのハンバーガーメニューを作成することができます。また、Webフォントを利用すれば、アイコンフォントを使ってハンバーガーメニューを表示することも可能です。

スマホ以外での表示方法

ハンバーガーメニューは、主にスマホサイトで利用されることが多いですが、PCサイトでも採用するケースが増えています。PCサイトでハンバーガーメニューを採用する場合は、画面幅に合わせて表示・非表示を切り替える必要があるため、JavaScriptやCSSで制御する必要があります。

まとめ

この記事では、jQueryを使ってハンバーガーメニューを実装する方法について解説しました。jQueryを使えば、初心者の方でも比較的簡単にハンバーガーメニューを実装することができます。ぜひ本記事を参考に、ご自身のサイトにもハンバーガーメニューを導入してみてください。

参考資料

jQuery
イベントリスナーの作成 (MDN Web Docs)

ハンバーガーメニューに関するよくある質問

質問	回答
Q. ハンバーガーメニューはSEOに影響しますか？	A. ハンバーガーメニューは、SEOに直接影響を与えることはありません。ただし、ユーザービリティの観点から、適切に実装されていない場合は、間接的にSEOに影響を与える可能性があります。
Q. ハンバーガーメニューは、すべてのサイトに適していますか？	A. 一概には言えませんが、メニュー項目が多いサイトや、モバイルファーストで設計されたサイトには適していると言えます。一方、メニュー項目が少ないサイトや、PCサイトでの閲覧がメインとなるサイトでは、必ずしも必要とは言えません。
Q. jQuery以外の方法でハンバーガーメニューを実装することはできますか？	A. はい、可能です。JavaScriptのDOM操作やCSSアニメーションなどを駆使すれば、jQueryを使わずにハンバーガーメニューを実装することができます。

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