ドロップダウンメニュー

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

ドロップダウンメニューは、トリガーされたときに追加のオプションを表示するUIコンポーネントです。これらは、あまりスペースを取らずにコンテンツを整理するために、ナビゲーションで一般的に使用されます。

まず、基本的なドロップダウンのHTML構造を作成しましょう：

<div class="dropdown">
  <button class="dropdown-toggle">Menu</button>
  <div class="dropdown-menu">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

それでは、ドロップダウンの表示を切り替えるためのJavaScriptを追加しましょう：

// ドロップダウンの切り替えボタンを取得します
const dropdownToggle = document.querySelector('.dropdown-toggle');

// ドロップダウンメニューを取得します
const dropdownMenu = document.querySelector('.dropdown-menu');

// 切り替えボタンにクリックイベントリスナーを追加します
dropdownToggle.addEventListener('click', function() {
  // ドロップダウンメニューの 'show' クラスを切り替えます
  dropdownMenu.classList.toggle('show');
});

最後に、ドロップダウンメニューの表示・非表示を切り替えるための基本的なCSSを追加します：

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

「Menu」ボタンをクリックすると、ドロップダウンメニューが表示されます。もう一度クリックすると、メニューが非表示になります。

チャレンジ

簡単

ボタンをクリックしたときに表示/非表示が切り替わるドロップダウンメニューを作成します。

ステップ:

HTML内:
- ボタンに onclick 属性を追加し、クリックされたときに toggleDropdown という名前の関数を呼び出すようにします。
JavaScript内:
- toggleDropdown という名前の関数を作成します。
- 関数の中で、IDが "myDropdown" の要素に対して "show" クラスを切り替えます（toggle）。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Save the Forests</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Save the Forests</h1>
    <p>Even planting one or two trees makes a difference.</p>
  </header>

  <div class="dropdown">
    <button class="dropbtn">Learn More ▼</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Why forests matter</a>
      <a href="#">How to grow a tree</a>
      <a href="#">Community projects</a>
    </div>
  </div>

  <main>
    <section>
      <h2>Why Trees Are Important</h2>
      <p>
        Forests clean our air, give us oxygen, and are home to countless animals.  
        Each tree you plant helps fight climate change and supports life on Earth.
      </p>
    </section>
    <section>
      <h2> Start Small</h2>
      <p>
        Don’t wait for a big change. Start with just one or two trees in your yard or community.  
        Your small action inspires others!
      </p>
    </section>
  </main>

  <footer>
    <p> Together we can make the planet greener.</p>
  </footer>

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