Einführung
Erstellen Sie ein Dropdown-Menü, das erscheint, wenn der Benutzer mit der Maus über ein Element fährt.
Schritt 1) HTML hinzufügen:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Beispiel erläutert.
Verwenden Sie ein beliebiges Element, um ein Dropdown-Menü zu öffnen, z. B. ein Element. <button>, <a> Oder <p>.
Aus einem Container-Element (wie z. B. <div>) um ein Dropdown-Menü zu erstellen und darin Dropdown-Links hinzuzufügen.
Ein Element <div> um den Knopf herum und <div> Mit CSS so umschließen, dass das Dropdown-Menü korrekt positioniert wird.
Schritt 2) CSS hinzufügen:
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}Beispiel erklärt
Wir haben den Schieberegler mit Hintergrundfarbe, Abständen usw. gestaltet.
Die Klasse .dropdown verwendet position:relative, wenn es notwendig ist, den Dropdown-Inhalt direkt unter dem Dropdown-Button (mit position:absolute) zu positionieren.
Die Klasse `.dropdown-content` enthält das eigentliche Dropdown-Menü. Es ist standardmäßig ausgeblendet und wird im Float-Modus angezeigt (siehe unten). Die Mindestbreite ist auf 160px festgelegt. Sie können diese gerne ändern. Tipp: Soll die Breite des Dropdown-Inhalts der Breite des Dropdown-Buttons entsprechen, setzen Sie die Breite auf 100 % (und `overflow: auto`, um das Scrollen auf kleinen Bildschirmen zu ermöglichen).
Anstelle eines Rahmens haben wir die Box-Shadow-Eigenschaft verwendet, um das Dropdown-Menü wie eine «Karte» aussehen zu lassen. Außerdem verwenden wir den Z-Index, um das Dropdown-Menü vor anderen Elementen zu positionieren.
Der Selektor :hover wird verwendet, um das Dropdown-Menü anzuzeigen, wenn der Benutzer mit der Maus über die Dropdown-Schaltfläche fährt.
