モバイルハンバーガーメニューの切り替え

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 13/27。

小さな画面では、ウェブサイトはフルナビゲーションを表示する代わりに、バーガー（☰）アイコンをよく使用します。ユーザーがバーガーアイコンをクリックすると、JavaScriptがナビゲーションメニューの表示・非表示を切り替えます。

まず、基本的なHTML構造を作成します。3つのspan（CSSでバーガーアイコンを形成する線としてスタイル設定されたもの）を持つボタンと、メニューリンクを含む非表示の<nav>です。

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

それでは、バーガーメニューをスタイリングするための基本的なCSSを追加しましょう。

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* hiddenクラスを持っていないときにナビゲーションを表示する */
nav:not(.hidden) {
  display: block;
}

次に、メニューを切り替えるためのJavaScriptを追加します。

// バーガーボタンとモバイルナビゲーションを選択します
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// バーガーボタンにクリックイベントリスナーを追加します
burgerBtn.addEventListener('click', function() {
  // モバイルナビゲーションのhiddenクラスを切り替えます
  mobileNav.classList.toggle('hidden');
});

バーガーボタンをクリックすると、ナビゲーションメニューの hidden クラスが切り替わり、表示・非表示が切り替わります。

チャレンジ

簡単

バーガーボタンのイベントリスナー内に、2行のコードを追加します：

buttonに対して"active"クラスを切り替えます（toggle）。これにより、3本線が「X」のアニメーションになります。
menuに対して"active"クラスを切り替えます（toggle）。これにより、ナビゲーションメニューが表示されたり消えたりします。

自分で試してみよう

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- バーガーボタン -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- ナビゲーションメニュー -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- メインコンテンツ -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

  <script src="script.js"></script>
</body>
</html>