Wie erstelle ich per Mausklick aktivierte Dropdown-Menüs und entferne Pfeilsymbole in Bootstrap?

Hover-aktivierte Dropdown-Menüs in Twitter Bootstrap

Viele Benutzer ziehen es vor, dass ihre Bootstrap-Menüs beim Bewegen mit der Maus heruntergeklappt werden, sodass keine expliziten Klicks erforderlich sind . In diesem Artikel geht es sowohl um die Hover-Funktionalität als auch um das Entfernen von Pfeilsymbolen neben Menütiteln.

Hover-aktiviertes Dropdown

Um das automatische Dropdown beim Hover zu aktivieren, verwenden Sie CSS Zielen Sie auf die ausgeblendete Menüoption. Fügen Sie den folgenden Code zu Ihrem CSS hinzu:

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

Für responsive Designs binden Sie den Code in eine Medienabfrage ein:

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

Entfernen des Pfeilsymbols

• Bootstrap 3: Entfernen Sie den HTML-Code aus dem .dropdown-toggle Ankerelement.
• Bootstrap 2 und niedriger: Zielen Sie auf die Pfeile und entfernen Sie sie mit diesem CSS-Selektor:

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

Durch Einbindung dieser CSS Durch Modifikationen können Sie per Hover aktivierte Dropdown-Menüs erreichen und Pfeilsymbole entfernen, wodurch das Benutzererlebnis verbessert und Ihre Bootstrap-Menüs individuell angepasst werden gewünscht.

Das obige ist der detaillierte Inhalt vonWie erstelle ich per Mausklick aktivierte Dropdown-Menüs und entferne Pfeilsymbole in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!