Twitter Bootstrap のホバーでアクティブ化されるドロップダウン メニュー

多くのユーザーは、明示的なクリックの必要がなく、ホバー時にブートストラップ メニューがドロップダウンすることを好みます。 。この記事では、ホバー機能と、メニュー タイトルの横にある矢印アイコンの削除の両方について説明します。

ホバーでアクティブ化されたドロップダウン

ホバー時の自動ドロップダウンを有効にするには、CSS を利用して隠しメニューオプションをターゲットにします。次のコードを CSS に追加します:

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

レスポンシブ デザインの場合は、コードをメディア クエリでラップします:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

矢印アイコンの削除

• ブートストラップ 3: .dropdown-toggle アンカー要素から HTML を削除します。
• ブートストラップ 2 以下: ターゲットを指定して矢印を削除しますこの CSS セレクターを使用します:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

これらの CSS 変更を組み込むことで、ホバーでアクティブ化されるドロップダウン メニューを実現し、矢印アイコンを排除して、ユーザー エクスペリエンスを向上させ、必要に応じてブートストラップ メニューをカスタマイズできます。