【保存版】Bootstrapドロップダウンをホバーで表示：HTML、CSS、JavaScriptによる実装ガイド

2024-06-14

Bootstrap ドロップダウンをホバーで表示する方法

HTML

まず、通常のBootstrapドロップダウンと同様にHTMLを記述します。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

JavaScript

次に、JavaScriptを使用して、ホバーイベントを検出してドロップダウンを展開するコードを追加します。

$(document).ready(function() {
  $('.dropdown').hover(function() {
    $(this).find('.dropdown-menu').toggleClass('show');
  });
});

このコードは、.dropdown クラスを持つすべての要素に対して hover イベントをリスナーします。マウスが要素の上に入ったときに show クラスを、外れたときに show クラスをトグルします。これにより、マウスホバーでドロップダウンが展開/非表示になります。

補足

上記のコードは、Bootstrap 5 を使用しています。Bootstrap 4 を使用している場合は、dropdown-menu-show クラスと dropdown-menu-hide クラスを使用する必要があります。
マウスホバーで展開するだけでなく、クリックでも展開できるようにしたい場合は、data-bs-toggle="dropdown" 属性を data-bs-toggle="dropdown hover" に変更します。
ドロップダウンが他の要素と重なって表示される場合は、position: static を position: absolute に変更するなど、CSS を調整する必要があります。

Bootstrap ドロップダウンをホバーで表示するサンプルコード

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Dropdown Hover</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Bootstrap Dropdown Hover</h1>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {
      $('.dropdown').hover(function() {
        $(this).find('.dropdown-menu').toggleClass('show');
      });
    });
  </script>
</body>
</html>

説明

このコードは、Bootstrap 5 と jQuery を使用しています。
HTML 部分では、通常の Bootstrap ドロップダウンと同様に dropdown クラスを持つ要素を作成しています。
JavaScript 部分では、hover イベントを使用して、マウスがドロップダウン要素の上に入ったときに show クラスを、外れたときに show クラスをトグルしています。
これにより、マウスホバーでドロップダウンが展開/非表示になります。

実行方法

上記のコードを index.html などのファイルに保存します。
ブラウザでそのファイルを開きます。
ドロップダウンボタンにマウスを近づけ、離します。

動作確認

マウスをドロップダウンボタンに近づけると、ドロップダウンメニューが表示されます。マウスをドロップダウンメニューから外すと、ドロップダウンメニューが非表示になります。

カスタマイズ

このコードは、ニーズに合わせてカスタマイズすることができます。

ドロップダウンの色やスタイルを変更するには、CSS を編集します。
ドロップダウンの動作を変更するには、JavaScript を編集します。

Bootstrap ドロップダウンをホバーで表示するその他の方法

以下のコードは、JavaScriptのみを使用してBootstrap ドロップダウンをホバーで表示する方法です。

const dropdownElements = document.querySelectorAll('.dropdown');

for (const dropdownElement of dropdownElements) {
  const dropdownButton = dropdownElement.querySelector('.dropdown-toggle');
  const dropdownMenu = dropdownElement.querySelector('.dropdown-menu');

  dropdownButton.addEventListener('mouseover', () => {
    dropdownMenu.classList.add('show');
  });

  dropdownButton.addEventListener('mouseout', () => {
    dropdownMenu.classList.remove('show');
  });
}

このコードは、querySelectorAll メソッドを使用して、すべての .dropdown 要素を取得します。
ループを使用して、各ドロップダウン要素に対して、dropdown-toggle と dropdown-menu 要素を取得します。
addEventListener メソッドを使用して、mouseover と mouseout イベントリスナーを dropdownButton 要素に追加します。
mouseover イベントリスナーは、show クラスを dropdownMenu 要素に追加して、ドロップダウンメニューを表示します。

利点

jQuery を必要としないため、プロジェクトを軽量化できます。

欠点

冗長なコードになる可能性があります。
イベントリスナーの追加により、パフォーマンスがわずかに低下する可能性があります。

Bootstrap 5 では、data-bs-toggle="dropdown hover" 属性を使用して、ドロップダウンをホバーで表示することができます。

<div class="dropdown" data-bs-toggle="dropdown hover">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

この方法では、data-bs-toggle="dropdown hover" 属性を dropdown 要素に追加します。
これにより、Bootstrap はドロップダウンをホバーで自動的に展開します。

コードが簡潔で読みやすいです。
追加の JavaScript コードが不要です。

Bootstrap 5 のみで動作します。

カスタム CSS を使用して、ドロップダウンをホバーで表示することができます。

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

この CSS は、.dropdown 要素がホバー状態にある場合、.dropdown-menu 要素の display プロパティを block に設定します。
これにより、ドロップダウンメニューが表示されます。

他の方法と比べて柔軟性が高いです。
アニメーションやその他のエフェクトを追加することができます。

Bootstrap のデフォルトの動作をオーバーライドすることになります。

シンプルで軽量な方法を探している場合は、JavaScriptのみを使用する方法 がおすすめです。
コードが簡潔で読みやすい方法を探している場合は、Bootstrap 5 の data-bs-toggle="dropdown hover" 属性を使用する方法 がおすすめです。
柔軟性とカスタマイズ性を求めている場合は、カスタム CSS を使用する方法 がおすすめです。

javascript jquery html