CSS Drop-Down-Menü
Verwenden Sie CSS, um die Anzeige nach einer Maus auf das Drop-Down-Menü Effekt zu erzeugen.
Beispiele für das Drop-Down-Menü
Beispiele Demo 1
Dieses Tutorial
w3big.com
Beispiele Demo 2
Beispiele Demo 3
Grund Dropdown-Menü
Wenn die Maus auf die angegebenen Elemente bewegt wird, wird Drop-Down-Menü erscheint.
Beispiele
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-Inhalt {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 0px 16px 8px rgba (0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown: schweben .dropdown-Inhalt {
display: block;
}
</ Style>
<Div class = "Dropdown">
<Span> Maus über mich </ span>
<Div class = "Drop - Down-content ">
<P> Hallo Welt! </ P>
</ Div>
</ Div>
Versuchen »
Beispiele für analytische
HTML - Teil:
Wir können jede HTM verwenden, um die Elemente auf den Dropdown-Menü zu öffnen, wie zum Beispiel: <span> oder ein <button> Element.
Verwenden Containerelement (zB: <div>) ein Dropdown-Menü zu erstellen und an beliebiger Stelle möchten Sie an sich zu setzen.
Mit <div> -Element, diese Elemente zu wickeln, und verwenden Sie CSS den Inhalt der Drop-down-Stil zu setzen.
CSS Teil:
.dropdown Klasse verwendet position:relative , die das Drop - Down - Menü Inhalt eingestellt wird in der Drop-Down - Taste platziert wird (unter Verwendung von position:absolute ) in der rechten unteren Ecke Position.
.dropdown-content - Klasse ist die tatsächliche Drop-Down - Menü. Ist standardmäßig ausgeblendet, wird in der Maus angezeigt wird, nachdem auf das angegebene Element bewegt. Beachten Sie, dass min-width Wert auf 160px gesetzt. Sie können es frei ändern. Hinweis: Wenn Sie auf den Dropdown-and - Drop-Down - Taste von Breitband - Content konsistent, stellen Sie die einstellen wollen width bis 100% ( overflow:auto - Einstellung kann die kleine Größe des Bildschirms scrollen).
Wir verwenden die box-shadow Eigenschaft das Drop-down - Menü , das aussieht wie ein "Karte."
:hover - Selektor für Benutzer im Dropdown-Menü wird angezeigt , wenn die Maus auf die Dropdown-Schaltfläche bewegt wird.
Drop-Down-Menü
Erstellen Sie ein Dropdown-Menü, und ermöglicht es dem Benutzer ein Element in der Liste zu wählen:
Die vorstehenden Beispiele für ähnliche Fälle, wenn wir auf einen Link in der Dropdown-Liste hinzuzufügen, und legen Sie den Stil:
Beispiele
/ * Style Drop-Down - Taste * /
.dropbtn {
background-color: # 4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/ * Container <div> - Sie brauchen , um die Drop-down - Inhalte * zu lokalisieren /
.dropdown {
position: relative;
display: inline-block;
}
/ * Pulldown - Gehalt (standardmäßig ausgeblendet) * /
.dropdown-Inhalt {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 0px 16px 8px rgba (0,0,0,0.2);
}
/ * Link - Drop-Down - Menüs * /
.dropdown-Gehalt a {
Farbe: schwarz;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ * Edit - Drop-Down - Menü Hover - Link Farbe Nach * /
.dropdown-Inhalt ein: Hover {background -Farbe: # f1f1f1}
/ * Nach der Show im Dropdown-Menü Hover * /
.dropdown: schweben .dropdown-Inhalt {
display: block;
}
/ * Wenn der Inhalt der Drop-down nach dem Drop-down - Schaltfläche zeigt die modifizierte Hintergrundfarbe * /
.dropdown: schweben .dropbtn {
background-color: # 3e8e41;
}
</ Style>
<Div class = "Dropdown">
<Taste class = "dropbtn"> Dropdown-Menü </ button>
<Div class = "Drop - Down-content ">
<A Href = "#"> Dieses Tutorial 1 </ a>
<A Href = "#"> Dieses Tutorial 2 </ a>
<A Href = "#"> Dieses Tutorial 3 </ a>
</ Div>
</ Div>
Versuchen »
Die Ausrichtung Drop-Down-Inhalt
float: left;
float: right;
Wenn Sie im Dropdown-Menü Floating richtigen Inhalte von rechts einrichten wollen nach rechts anstatt von links nach links, können Sie den folgenden Code hinzufügen right: 0;
Weitere Beispiele
Bild Dropdown-
Dieses Beispiel zeigt, wie man ein Bild davon, wie das Pull-Down-Menü hinzuzufügen.
Drop - Down - Navigation
Dieses Beispiel zeigt, wie ein Drop-Down-Menü auf der Navigationsleiste hinzuzufügen.