【コピペOK】ハンバーガーメニューをjQueryで実装する方法

著者:牧野健人

Webサイトで非常によく用いるハンバーガーメニューの実装方法を解説します。

コピペOKなので、ぜひご活用ください。

牧野健人

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

ハンバーガーメニューをjQueryで実装するコード

以下でHTML、CSS、 jQueryのコードを掲載した上でそれぞれのポイントを解説します。

できあがるハンバーガメニューのデモはデモページをご覧ください。

コードの完成形

まずはコードを掲示し、後続するセクションで実装のポイントを解説します。

HTML

<header class="header">
  <div class="logo">LOGO</div>
  <button class="hamburger-menu" id="js-hamburger-menu">
    <span class="hamburger-menu__bar"></span>
    <span class="hamburger-menu__bar"></span>
    <span class="hamburger-menu__bar"></span>
  </button>
  <nav class="navigation">
    <ul class="navigation__list">
      <li class="navigation__list-item"><a href="#" class="navigation__link">会社情報</a></li>
      <li class="navigation__list-item"><a href="#" class="navigation__link">事業紹介</a></li>
      <li class="navigation__list-item"><a href="#" class="navigation__link">お知らせ</a></li>
      <li class="navigation__list-item"><a href="#" class="navigation__link">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

CSS

.header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.logo {
  font-weight: 700;
  padding-left: 14px;
}
.hamburger-menu {
  width: 50px;
  height: 50px;
  position: relative;
  border: none;
  background: transparent;
  appearance: none;
  padding: 0;
  cursor: pointer;
}
.hamburger-menu__bar {
  display: inline-block;
  width: 44%;
  height: 2px;
  background: #242424;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: .5s;
}
.hamburger-menu__bar:first-child {
  top: 16px;
}
.hamburger-menu__bar:nth-child(2) {
  top: 24px;
}
.hamburger-menu__bar:last-child {
  top: 32px;
}
.hamburger-menu--open .hamburger-menu__bar {
  top: 50%;
}
.hamburger-menu--open .hamburger-menu__bar:first-child {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hamburger-menu--open .hamburger-menu__bar:last-child {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
  display: none;
}
.navigation {
  display: none;
  background: #242424;
  position: absolute;
  top: 50px;
  width: 100%;
  z-index: 9999;
}
.navigation__list {
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navigation__list-item {
  border-bottom: solid 1px #474747;
}
.navigation__list-item:first-child {
  border-top: solid 1px #474747;
}
.navigation__link {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: block;
  padding: 24px 0;
  transition: .5s;
}
@media (hover: hover) and (pointer: fine) {
  .navigation__link:hover {
    background: #333;
  }
}

jQuery

$(function () {
  $('#js-hamburger-menu, .navigation__link').on('click', function () {
    $('.navigation').slideToggle(500)
    $('.hamburger-menu').toggleClass('hamburger-menu--open')
  });
});

もしサイトに jQueryが導入されていなければ、上記のスクリプトよりも上の位置で例えば下記のように読み込んでください。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>

※ ここではjsDelivrのCDNを読み込んでいますが、他のCDNやセルフホスティングでももちろん問題ありません。

コードの解説

HTML、CSS、jQueryのコードのそれぞれのポイントを解説します。

HTML

ハンバーガーメニューはヘッダーの中に配置することがもっとも一般的ですので、実用性を考えてそのようなレイアウトにしています。

また、ハンバーガーメニューのボタン部分を<div><span>で実装しているケースも巷には存在しますが、これらはユーザーのクリックに対してインタラクションを発生させるための要素ではないため誤りです。

ユーザーのクリックに応じてメニューを展開する上では<button>を使うのが正しく、例えばGoogleやMozillaなどもbuttonを使って実装しています。

buttonの中でハンバーガーマークを表示するためにspan等を使うのはOKです。

マテリアルデザインのWebサイトにおけるハンバーガーメニューの実装
GoogleのマテリアルデザインのWebサイトにおけるハンバーガーメニューの実装
MDNのWebサイトにおけるハンバーガーメニューの実装
MDNのWebサイトにおけるハンバーガーメニューの実装

ハンバーガーマーク部分は画像として実装する手もありますが、今回の例ではHTMLとCSSだけで実装しています。

CSS

上述の通りハンバーガーマークはHTMLとCSSだけで実装しており、それが.hamburger-menu__bar(疑似クラス付きの箇所を含む)です。

メニューを開いた状態ではバツマークに変わるようにしています。(クリックされたら中央の線を消し、上下の線を45度に傾ける)

クリックでバツに変わるハンバーガーメニュー

また、利便性を考慮して、メニューの中の項目は、テキスト部分だけでなくエリア全体がクリック可能な要素になるようにしています

クリック領域を広げたハンバーガーメニュー

jQuery

jQueryではクリックに応じて「1. ハンバーガーマークを変化させる」「2. メニューを開け閉めする」をおこなっています。

また、ハンバーガーメニュー内のリンクの遷移先が別ページでなく現在のページ内での移動になるケースも考慮して、ハンバーガーマークだけでなくメニュー内の項目へのクリックもトリガーに含めています

それをしないと、同じページ内での遷移の場合、メニューが開いたまま移動することになり利便性を損ねてしまうため重要なポイントです。

WebサイトのCV数を増やしたいなら無料相談 / お問い合わせ