CSS-Dropdown-Menü
Verwenden Sie CSS, um einen Dropdown-Menü-Effekt zu erstellen, der erscheint, wenn die Maus darüber bewegt wird.
Dropdown-Menü-Beispiel
Beispiel-Demo 1
Beispiel
www.example.com
Beispiel-Demo 2
Beispiel-Demo 3
Einfaches Dropdown-Menü
Wenn die Maus über das angegebene Element bewegt wird, erscheint ein Dropdown-Menü.
Beispiel
Selbst ausprobieren »
Beispielanalyse
HTML-Abschnitt:
Wir können jedes beliebige HTML-Element verwenden, um das Dropdown-Menü zu öffnen, wie z. B. ein <span>- oder ein <button>-Element.
Verwenden Sie ein Container-Element (z. B. <div>), um den Inhalt des Dropdown-Menüs zu erstellen, und platzieren Sie es, wo immer Sie möchten.
Verwenden Sie ein <div>-Element, um diese Elemente zu umschließen, und verwenden Sie CSS, um den Dropdown-Inhalt zu gestalten.
CSS-Abschnitt:
.dropdownKlassenverwendungposition:relative, dadurch wird festgelegt, dass der Inhalt des Dropdown-Menüs unterhalb der Dropdown-Schaltfläche platziert wird (unter Verwendungposition:absoluteder Position unten rechts von ).
.dropdown-contentclass ist das eigentliche Dropdown-Menü. Es ist standardmäßig ausgeblendet und wird angezeigt, wenn die Maus über das angegebene Element bewegt wird. Hinweismin-widthSetzen Sie den Wert auf 160px. Sie können ihn beliebig ändern.Hinweis:Wenn Sie möchten, dass der Dropdown-Inhalt dieselbe Breite wie der Dropdown-Button hat, können Siewidthals 100% festlegen (overflow:autoeingestellt, um das Scrollen auf kleinen Bildschirmen zu ermöglichen).
Wir verwendenbox-shadowDas Attribut lässt das Dropdown-Menü wie eine "Karte" aussehen.
:hoverDer Selektor wird verwendet, um das Dropdown-Menü anzuzeigen, wenn der Benutzer die Maus über den Dropdown-Button bewegt.
Dropdown-Menü
Erstellen Sie ein Dropdown-Menü, das Benutzern ermöglicht, ein Element aus der Liste auszuwählen:
Dieses Beispiel ähnelt dem vorherigen, bei dem wir Links zur Dropdown-Liste hinzugefügt und Stile festgelegt haben:
Beispiel
/* Stile für Dropdown-Button */
.dropbtn {
background-color: #4C7EAF;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Container <div> - muss den Dropdown-Inhalt positionieren */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown-Inhalt (standardmäßig ausgeblendet) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Dropdown-Menü-Links */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Ändere die Farbe des Dropdown-Menü-Links bei Hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Dropdown-Menü beim Überfahren mit der Maus anzeigen */
.dropdown:hover .dropdown-content {
display: block;
}
/* Wenn der Dropdown-Inhalt angezeigt wird, ändere die Hintergrundfarbe des Dropdown-Buttons */
.dropdown:hover .dropbtn {
background-color: #4877A6;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown-Menü</button>
<div class="dropdown-content">
<a href="#">Beispiel 1</a>
<a href="#">Beispiel 2</a>
<a href="#">Beispiel 3</a>
</div>
</div>
Selbst ausprobieren »
Ausrichtung des Dropdown-Inhalts
float:left;
float:right;
Wenn Sie möchten, dass der Inhalt eines rechts gefloateten Dropdown-Menüs von rechts nach links statt von links nach rechts ausgerichtet wird, können Sie den folgenden Code hinzufügen:right: 0;
Weitere Beispiele
Bild-Dropdown
Dieses Beispiel zeigt, wie man Bilder zu einem Dropdown-Menü hinzufügt.
Navigationsleisten-Dropdown
Dieses Beispiel zeigt, wie man ein Dropdown-Menü zur Navigationsleiste hinzufügt.