Categories: html css js

CSSとJSで折りたたみ式メニュー（ハンバーガーメニュー）の基本と実装方法を徹底解説！

スマートフォンやタブレットなどのモバイル端末が主流となった今、Webサイトのナビゲーションも変化しています。中でも「ハンバーガーメニュー（折りたたみ式メニュー）」は、限られたスペースを有効活用するために多くのWebサイトで採用されている定番のUIデザインです。この記事では、ハンバーガーメニューの基本知識から、HTML・CSS・JavaScriptによるシンプルな実装方法まで、初心者の方にもわかりやすく解説します。

ハンバーガーメニューとは？
なぜハンバーガーメニューが必要なのか？
ハンバーガーメニューの基本構造
CSSでのスタイル設定
JavaScriptで表示・非表示を切り替える
よくある実装パターンと注意点
1. アニメーション付きで滑らかに開閉させる
2. アクセシビリティへの配慮
ハンバーガーメニュー導入のメリット・デメリット
1. メリット
2. デメリット
ハンバーガーメニューを使ったデザインの参考例
まとめ：ハンバーガーメニューは万能ではないが非常に便利

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

ハンバーガーメニューとは、三本線のアイコンをクリックまたはタップすることでメニューを展開・収納できるナビゲーション形式です。この三本線の見た目がハンバーガーに似ていることから、そう呼ばれています。

このメニューは、画面の小さいモバイル端末で多くの項目を表示する際に便利で、Webデザインのレスポンシブ化において重要な役割を果たしています。

なぜハンバーガーメニューが必要なのか？

現代のWebサイトは、ユーザーがスマートフォンやタブレットからアクセスすることを前提に設計されています。そのため、以下のようなニーズに応えるために、ハンバーガーメニューが必要とされます。

限られた画面スペースの有効活用
シンプルで直感的なUI
レスポンシブ対応の必須要素

また、メニューを非表示にすることで、コンテンツがより目立ちやすくなるというメリットもあります。

ハンバーガーメニューの基本構造

ハンバーガーメニューの基本的なHTML構造は以下のようになります。

<!-- ハンバーガーアイコン -->
<div class="menu-toggle" id="menu-toggle">
  ☰
</div>

<!-- ナビゲーションメニュー -->
<nav class="nav-menu" id="nav-menu">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

アイコン部分はボタンでも代用できます。ここでは最もシンプルな表現として「☰」を使っています。

CSSでのスタイル設定

次に、CSSでハンバーガーメニューの基本スタイルを整えます。最初は非表示にして、クリックされたときに表示されるようにします。

.menu-toggle {
  font-size: 24px;
  cursor: pointer;
  display: block;
}

.nav-menu {
  display: none;
  background-color: #f8f8f8;
  padding: 10px;
}

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

.nav-menu li {
  margin: 10px 0;
}

表示・非表示の制御はJavaScriptを使って行います。

JavaScriptで表示・非表示を切り替える

以下のJavaScriptを使うことで、アイコンクリックでメニューの開閉を制御できます。

document.getElementById("menu-toggle").addEventListener("click", function () {
  const navMenu = document.getElementById("nav-menu");
  if (navMenu.style.display === "block") {
    navMenu.style.display = "none";
  } else {
    navMenu.style.display = "block";
  }
});

これで基本的なハンバーガーメニューが完成します。

よくある実装パターンと注意点

アニメーション付きで滑らかに開閉させる

CSSトランジションを活用すれば、滑らかな開閉が可能です。

.nav-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-menu.active {
  max-height: 500px; /* 適当な数値に設定 */
}

JavaScriptも以下のように変更します。

document.getElementById("menu-toggle").addEventListener("click", function () {
  const navMenu = document.getElementById("nav-menu");
  navMenu.classList.toggle("active");
});

アクセシビリティへの配慮

メニューアイコンには aria-label を設定
メニューの開閉に aria-expanded を使う

<div class="menu-toggle" id="menu-toggle" aria-label="メニューを開閉" aria-expanded="false">
  ☰
</div>

JavaScript側でも更新が必要です。

const toggle = document.getElementById("menu-toggle");
const navMenu = document.getElementById("nav-menu");

toggle.addEventListener("click", function () {
  const isExpanded = toggle.getAttribute("aria-expanded") === "true";
  toggle.setAttribute("aria-expanded", String(!isExpanded));
  navMenu.classList.toggle("active");
});