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

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

小さな画面では、ウェブサイトは完全なナビゲーションを表示する代わりに、burger（☰）アイコンを使用することがよくあります。ユーザーが burger アイコンをクリックすると、JavaScript は navigation menu の表示と非表示を切り替えます。

まず、基本的なHTML構造を作成します。3つの span（CSSで線としてスタイル設定し、burgerアイコンを形成）を持つ buttonと、メニューリンクを含む非表示の <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>

それでは、burger menu のスタイルを設定するために、基本的な 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;
}

/* Show the navigation when it doesn't have the hidden class */
nav:not(.hidden) {
  display: block;
}

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

// Select the burger button and mobile navigation
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Add click event listener to the burger button
burgerBtn.addEventListener('click', function() {
  // Toggle the hidden class on the mobile navigation
  mobileNav.classList.toggle('hidden');
});

burger button をクリックすると、navigation menu の hidden class が切り替わり、making それが表示または非表示になります。

チャレンジ

簡単

burger button の event listener 内で、2 行のコードを追加します。

button の "active" class を Toggle します。これにより、3 本の line が「X」の形にアニメーションします。
menu の "active" class を Toggle します。これにより、navigation menu が表示・非表示になります。

自分で試してみよう

<!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>