Bootstrap4でナビゲーションバーのドロップダウンリンクをマウスホバーで表示する方法

確認飛行物体

5年前

Bootstrap4でナビゲーションバーのドロップダウンリンクをマウスホバーで表示する方法をご紹介します。

1 条件
2 事前準備
- 2.1 サンプルソース
3 実装
- 3.1 サンプルソース（変更後）
- 3.2 ブラウザでの表示
4 参考
- 4.1 stackoverflow：How to implement a Navbar Dropdown Hover in Bootstrap v4?

条件

Bootstrap4

事前準備

Bootstrap関連の事前準備は、以下の記事の「bootstrap4によるナビゲーションバー表示 > 事前準備、フォルダ構成」をご参照ください。

Bootstrapでナビゲーションバーの文字色／背景色を指定色に変える方法

サンプルソース

ここでは以下のようなソースを用いて確認を行います。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="shift-JIS">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    
    <title>Hello World!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="Navber">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">リンク</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              ドロップダウン
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">メニュー1</a>
              <a class="dropdown-item" href="#">メニュー2</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">その他</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
          <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
        </form>
      </div><!-- /.navbar-collapse -->
    </nav>
  </body>
</html>

実装

ポイントは以下の3点です。

style.css：.dropdown:hoverの記述を行う。
⇒マウスホバーでメニューが表示されるようになります。
index.html：ドロップダウンのaタグから、data-toggle=”dropdown”属性を削除する。
⇒メニューがクリックされた際、アイテムが固定表示にならないようにします。
index.html：ドロップダウンメニューのdivタグにmt-0を追加する。（上方向のマージンを0にする）
⇒メニューとアイテムのギャップを削除して、マウスホバーでアイテムを選択出来るようにします。

サンプルソース（変更後）

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="shift-JIS">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    
    <title>Hello World!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="Navber">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">リンク</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">
              ドロップダウン
            </a>
            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">メニュー1</a>
              <a class="dropdown-item" href="#">メニュー2</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">その他</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
          <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
        </form>
      </div><!-- /.navbar-collapse -->
    </nav>
  </body>
</html>

style.css

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

ブラウザでの表示

ナビゲーションバーの「ドロップダウン」にマウスホバーしたときに、ドロップダウンメニューが開いてメニュー選択出来るようになります。

参考

stackoverflow：How to implement a Navbar Dropdown Hover in Bootstrap v4?

https://stackoverflow.com/questions/42183672/how-to-implement-a-navbar-dropdown-hover-in-bootstrap-v4/42183824