【クリック&ホバー】ドロップダウンメニューをJavaScriptで実装する方法は？

※本ページはプロモーションが含まれています。

ハック君

ドロップダウンメニューを実装したいんだけど、手順がいまいち分からないな〜

こんな悩みにお答えします。

本記事の内容

ドロップダウンメニューの基本的な作成手順

ドロップダウンメニューは、Webページやアプリケーションでよく見られるUI要素で、クリックまたはホバーすると選択肢が表示され、選択肢から一つを選ぶことができます。JavaScriptを使用して、動的な表示や挙動を持つドロップダウンメニューを作成します。

記事内の実装例を参考にして、自身のサイトにドロップダウンメニューを導入してみましょう！

未来に向けて、一歩を踏み出しましょう。それでは、ご一読ください！

ドロップダウンメニューの基本的な作成手順とHTML/CSS/JavaScriptのサンプルコード
1. ドロップダウンメニューの完成デモ
結論とまとめ

ドロップダウンメニューの基本的な作成手順とHTML/CSS/JavaScriptのサンプルコード

UIHACK 編集長

以下は、ドロップダウンメニューの基本的な作成手順とHTML/CSS/JavaScriptのサンプルコードです。

ドロップダウンメニューの完成デモ

UIHACK 編集長

解説

上記のコードは、
親メニューの「メニュー１」「メニュー2」「メニュー3」をホバーすると
子階層メニューの「サブメニュー」の要素が現れます。

以下にHTML/CSS/JavaScripの解説をしています。

HTML

<ul id="nav">
  <li>
    😄メニュー1
    <ul>
      <li><a href="#">サブメニュー1</a></li>
      <li><a href="#">サブメニュー2</a></li>
      <li><a href="#">サブメニュー3</a></li>
    </ul>
  </li>
  <li>
    😆メニュー2
    <ul>
      <li><a href="#">サブメニュー4</a></li>
      <li><a href="#">サブメニュー5</a></li>
      <li><a href="#">サブメニュー6</a></li>
    </ul>
  </li>
  <li>
    😚メニュー3
    <ul>
      <li><a href="#">サブメニュー7</a></li>
      <li><a href="#">サブメニュー8</a></li>
      <li><a href="#">サブメニュー9</a></li>
    </ul>
  </li>
</ul>

UIHACK 編集長

解説

上記のコードは、リスト要素(ulとli)を使用してメニューとサブメニューの階層構造を作成しています。親メニュー(li)内には子メニュー(ul)が含まれており、子メニューの各項目はliとアンカータグ(a)で構成されています。

CSS

#nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

UIHACK 編集長

解説

navは、idがnavである要素を選択します。ここではul要素を指定しています。list-style-type、padding、marginのプロパティを使用して、リストのスタイルや余白を指定しています。

#nav li {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

UIHACK 編集長

解説

display: inline-block;は、要素を横並びに表示します。
padding、background-color、cursorのプロパティを使用して、項目の余白、背景色、カーソルの形状を指定しています。

#nav li:hover ul {
  display: block;
}

UIHACK 編集長

解説

nav li:hover ulは、idがnavである要素の子孫であるli要素がホバーされたときに、その子要素であるul要素を選択します。display: block;は、要素をブロックレベルとして表示します。

Javascript

document.addEventListener("DOMContentLoaded", function () {
  var navItems = document.querySelectorAll("#nav li");

  navItems.forEach(function (item) {
    item.addEventListener("mouseover", function (e) {
      var dropdown = this.querySelector("ul");
      if (dropdown) {
        slideDown(dropdown);
      }
    });

    item.addEventListener("mouseout", function (e) {
      var dropdown = this.querySelector("ul");
      if (dropdown) {
        slideUp(dropdown);
      }
    });
  });

  // スライドダウンのアニメーション
  function slideDown(element) {
    // アニメーションの処理...
  }

  // スライドアップのアニメーション
  function slideUp(element) {
    // アニメーションの処理...
  }
});

UIHACK 編集長

解説

JavaScriptのコードは、DOMContentLoadedイベントが発生したときに実行されます。#nav liの要素を取得し、mouseoverイベントとmouseoutイベントにイベントリスナーを追加します。

mouseoverイベントが発生したときに、対象の要素内のul要素（サブメニュー）を取得し、slideDown関数を呼び出してスライドダウンのアニメーションを実行します。

mouseoutイベントが発生したときに、対象の要素内のul要素（サブメニュー）を取得し、slideUp関数を呼び出してスライドアップのアニメーションを実行します。

slideDown関数とslideUp関数は、メニューのスライドダウンとスライドアップのアニメーションを実行するための関数です。この部分の具体的なアニメーションの処理は、実際のアプリケーションの要件に応じてカスタマイズする必要があります。