もうクリックは不要！Twitter Bootstrapのメニューをホバーでスマートに開く

2024-04-02

Twitter Bootstrapのメニューをホバーで開く方法

手順

JavaScriptファイルの追加

BootstrapのJavaScriptファイルに加えて、bootstrap-hover-dropdown.jsというファイルをダウンロードし、プロジェクトに追加します。このファイルは、GitHubなどのリポジトリから入手できます。

HTMLコードの変更

ドロップダウンメニューの親要素に、data-hover="dropdown"という属性を追加します。

<li class="dropdown" data-hover="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    メニュー <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    ...
  </ul>
</li>

CSSコードの追加

以下のCSSコードを追加することで、ホバー時にドロップダウンメニューが表示されるようになります。

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-color: #fff;
}

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

オプション

data-hover-delay属性を追加することで、ホバーしてからメニューが表示されるまでの遅延時間を設定できます。

補足

上記の手順は、Bootstrap 3.x向けです。Bootstrap 4.xでは、一部コードが異なる場合があります。
ホバーで開く機能は、タッチデバイスでは動作しない場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Twitter Bootstrapのメニューをホバーで開く</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="bootstrap-hover-dropdown.js"></script>
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-default">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Bootstrap</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li class="dropdown" data-hover="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">メニュー <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">アイテム1</a></li>
              <li><a href="#">アイテム2</a></li>
              <li><a href="#">アイテム3</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</body>
</html>

Twitter Bootstrapのメニューをホバーで開く他の方法

JavaScriptのみを使用する方法

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

この方法は、bootstrap-hover-dropdown.jsのような外部ファイルを使用する必要がないので、シンプルで軽量です。

CSSのみを使用する方法

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

この方法は、JavaScriptを使用しないので、さらに軽量ですが、data-hover="dropdown"属性のようなHTML属性を使用する必要があり、コードが冗長になる場合があります。

Bootstrap 4.xでは、data-toggle="dropdown"属性の代わりにdata-hover="dropdown"属性を使用することで、ホバーで開くメニューを作成できます。

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-hover="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>
    <a class="dropdown-item" href="#">アイテム3</a>
  </div>
</li>