Wie kann ich Bootstrap-Dropdowns aktivieren, wenn ich mit der Maus darüber fahre, und die Pfeile entfernen?

Hoverable Bootstrap-Menü-Dropdowns

In diesem Artikel wird das Thema der Bootstrap-Menü-Dropdowns vertieft und die Anpassung ihres Verhaltens und Erscheinungsbilds erläutert. Konkret wird untersucht, wie man den Mauszeiger als Alternative zum Klicken zur Menüaktivierung und zum Entfernen der begleitenden Pfeile aktiviert.

Automatisches Dropdown beim Schweben

Um ein automatisches Menü-Dropdown zu erreichen Hover, CSS-Änderungen sind notwendig. Indem Sie auf die ausgeblendeten Menüoptionen abzielen und sie als Blöcke anzeigen, wenn Sie mit der Maus über das entsprechende Listenelement fahren, wird die gewünschte Funktionalität erreicht. Betrachten Sie das folgende Beispiel aus der Bootstrap-Dokumentation:

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

Reaktionsüberlegungen

Wenn die reaktionsfähigen Funktionen von Bootstrap verwendet werden, ist die automatische Dropdown-Funktionalität für die reduzierte Navigation möglicherweise nicht wünschenswert Balken auf kleineren Bildschirmen. Um dies zu beheben, kann der CSS-Code in eine Medienabfrage eingebunden werden:

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

Pfeilentfernung (Caret)

Das Ausblenden der Dropdown-Pfeile hängt von der Version von ab Bootstrap verwendet.

Bootstrap 3

Für Bootstrap 3, entfernen Sie einfach das HTML-Element aus dem .dropdown-toggle-Ankerelement.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <!-- remove this line -->
</a></p>
<p><strong>Bootstrap 2 und niedriger</strong></p>
<p>In Bootstrap 2 und Zuvor können der CSS-Selektor und der Code unten verwendet werden, um das zu entfernen Pfeile:</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}

Fazit

Das Anpassen der Bootstrap-Menü-Dropdown-Menüs zur Aktivierung beim Hover und das Entfernen der Pfeile ermöglicht eine verbesserte Benutzererfahrung und ästhetische Vorlieben. Das Verständnis der zugrunde liegenden CSS-Prinzipien ermöglicht es Entwicklern, diese Änderungen nahtlos in ihre Projekte zu implementieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Bootstrap-Dropdowns aktivieren, wenn ich mit der Maus darüber fahre, und die Pfeile entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!