ブートストラップでホバーでアクティブ化されるドロップダウン メニューを作成し、矢印アイコンを削除する方法

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

多くのユーザーは、明示的なクリックの必要性を排除し、ホバー時に 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 変更を組み込むことで、ホバーでアクティブ化されるドロップダウン メニューを実現し、矢印アイコンを排除して、ユーザーの操作性を向上させることができます。必要に応じてブートストラップ メニューを体験し、カスタマイズしてください。

以上がブートストラップでホバーでアクティブ化されるドロップダウン メニューを作成し、矢印アイコンを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。