Hover-aktivierte Dropdown-Menüs in Twitter Bootstrap

Viele Benutzer ziehen es vor, dass ihre Bootstrap-Menüs beim Hovern 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 dazu 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 schließen 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 das HTML aus dem .dropdown-toggle-Ankerelement.
• Bootstrap 2 & Lower: Zielen und entfernen Sie die Pfeile mit diesem CSS selector:

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

Durch die Integration dieser CSS-Änderungen können Sie per Mausklick aktivierte Dropdown-Menüs erreichen und Pfeilsymbole eliminieren, wodurch das Benutzererlebnis verbessert und Ihre Bootstrap-Menüs nach Wunsch angepasst werden.