JavaScriptでドロップダウンメニューを簡単に作成する方法12選

<nav>
  <ul>
    <li><a href="#">親メニュー1</a>
      <ul>
        <li><a href="#">子メニュー1-1</a></li>
        <li><a href="#">子メニュー1-2</a></li>
        <li><a href="#">子メニュー1-3</a></li>
      </ul>
    </li>
    <li><a href="#">親メニュー2</a>
      <ul>
        <li><a href="#">子メニュー2-1</a></li>
        <li><a href="#">子メニュー2-2</a></li>
        <li><a href="#">子メニュー2-3</a></li>
      </ul>
    </li>
    <li><a href="#">親メニュー3</a>
      <ul>
        <li><a href="#">子メニュー3-1</a></li>
        <li><a href="#">子メニュー3-2</a></li>
        <li><a href="#">子メニュー3-3</a></li>
      </ul>
    </li>
  </ul>
</nav>

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

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

nav > ul > li {
  display: inline-block;
  position: relative;
}

nav a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav ul ul li {
  width: 200px;
}

nav ul ul a {
  padding: 10px;
}

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

nav ul ul li:hover {
  background-color: #f2f2f2;
}

@media screen and (max-width: 768px) {
  nav > ul > li {
    display: block;
    width: 100%;
  }

  nav ul ul {
    position: static;
    box-shadow: none;
  }

  nav ul ul li {
    width: 100%;
  }
}

<nav>
  <ul>
    <li><a href="#" class="dropdown-toggle">親メニュー1</a>
      <ul class="dropdown">
        <li><a href="#">子メニュー1-1</a></li>
        <li><a href="#">子メニュー1-2</a></li>
        <li><a href="#">子メニュー1-3</a></li>
      </ul>
    </li>
    <!-- 他の親メニューも同様に記述 -->
  </ul>
</nav>

document.addEventListener('DOMContentLoaded', function() {
  const dropdownToggle = document.querySelectorAll('.dropdown-toggle');

  dropdownToggle.forEach(function(toggle) {
    toggle.addEventListener('click', function(e) {
      e.preventDefault();
      const dropdownMenu = this.nextElementSibling;
      dropdownMenu.classList.toggle('active');
    });
  });
});

<nav>
  <ul>
    <li>
      <select id="dropdown">
        <option value="">選択してください</option>
        <option value="1">項目1</option>
        <option value="2">項目2</option>
        <option value="3">項目3</option>
      </select>
    </li>
  </ul>
</nav>

<div id="result"></div>

document.addEventListener('DOMContentLoaded', function() {
  const dropdown = document.getElementById('dropdown');
  const result = document.getElementById('result');

  dropdown.addEventListener('change', function() {
    const selectedValue = this.value;
    result.textContent = `選択された値は${selectedValue}です`;
  });
});

<nav>
  <ul id="menu">
    <!-- ここにメニューの項目を動的に追加 -->
  </ul>
</nav>

document.addEventListener('DOMContentLoaded', function() {
  const menu = document.getElementById('menu');
  const menuItems = ['項目1', '項目2', '項目3', '項目4', '項目5'];

  menuItems.forEach(function(item) {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = '#';
    a.textContent = item;
    li.appendChild(a);
    menu.appendChild(li);
  });
});

<nav>
  <ul>
    <li>
      <select id="country">
        <option value="">国を選択してください</option>
        <option value="japan">日本</option>
        <option value="usa">アメリカ</option>
        <option value="china">中国</option>
      </select>
    </li>
    <li>
      <select id="city">
        <option value="">都市を選択してください</option>
      </select>
    </li>
  </ul>
</nav>

document.addEventListener('DOMContentLoaded', function() {
  const countrySelect = document.getElementById('country');
  const citySelect = document.getElementById('city');

  const cityData = {
    japan: ['東京', '大阪', '名古屋'],
    usa: ['ニューヨーク', 'ロサンゼルス', 'シカゴ'],
    china: ['北京', '上海', '広州']
  };

  countrySelect.addEventListener('change', function() {
    const selectedCountry = this.value;
    const cities = cityData[selectedCountry];

    citySelect.innerHTML = '<option value="">都市を選択してください</option>';

    if (cities) {
      cities.forEach(function(city) {
        const option = document.createElement('option');
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
      });
    }
  });
});

.dropdown {
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.dropdown.active {
  display: block;
  opacity: 1;
}

// タッチデバイス用のイベントリスナー
document.addEventListener('touchstart', function() {
  // タッチ開始時の処理
});

document.addEventListener('touchend', function() {
  // タッチ終了時の処理
});

/* タッチデバイス用のスタイル */
@media screen and (max-width: 768px) {
  .dropdown {
    /* ドロップダウンメニューのスタイル */
  }
}

<head>
  <!-- CSSファイルの読み込み -->
  <link rel="stylesheet" href="path/to/your/stylesheet.css">
</head>

/* 適切な詳細度のセレクタ */
nav > ul > li {
  /* 親メニューのスタイル */
}

nav > ul > li > ul {
  /* 子メニューのスタイル */
}

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">製品紹介</a>
      <ul>
        <li><a href="#">カテゴリA</a></li>
        <li><a href="#">カテゴリB</a></li>
        <li><a href="#">カテゴリC</a></li>
      </ul>
    </li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

nav {
  background-color: #333;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

nav > ul > li {
  position: relative;
}

nav a {
  display: block;
  padding: 15px;
  color: #fff;
  text-decoration: none;
}

nav > ul > li:hover > a {
  background-color: #555;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: #555;
}

nav ul ul li {
  border-bottom: 1px solid #777;
}

nav ul ul li:last-child {
  border-bottom: none;
}

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

<nav>
  <ul>
    <li><a href="#"><i class="fas fa-home"></i> ホーム</a></li>
    <li><a href="#"><i class="fas fa-info-circle"></i> 会社情報</a>
      <ul>
        <li><a href="#"><i class="fas fa-building"></i> 会社概要</a></li>
        <li><a href="#"><i class="fas fa-map-marker-alt"></i> アクセス</a></li>
        <li><a href="#"><i class="fas fa-briefcase"></i> 事業内容</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fas fa-envelope"></i> お問い合わせ</a></li>
  </ul>
</nav>

nav {
  background-color: #f2f2f2;
}

nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

nav > ul > li {
  position: relative;
}

nav a {
  display: flex;
  align-items: center;
  padding: 15px;
  color: #333;
  text-decoration: none;
}

nav a i {
  margin-right: 5px;
}

nav > ul > li:hover > a {
  background-color: #ddd;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav ul ul li {
  border-bottom: 1px solid #eee;
}

nav ul ul li:last-child {
  border-bottom: none;
}

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

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">ブログ</a>
      <ul>
        <li><a href="#">カテゴリ1</a></li>
        <li><a href="#">カテゴリ2</a></li>
        <li><a href="#">カテゴリ3</a></li>
      </ul>
    </li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

nav {
  background-color: #4CAF50;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

nav > ul > li {
  position: relative;
}

nav a {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

nav > ul > li:hover > a {
  background-color: #388E3C;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav ul ul li {
  border-bottom: 1px solid #eee;
}

nav ul ul li:last-child {
  border-bottom: none;
}

nav ul ul a {
  padding: 15px;
  color: #333;
  transition: background-color 0.3s;
}

nav ul ul a:hover {
  background-color: #f2f2f2;
}

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