Latest web development tutorials

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

Beispiele Demo 2

Beispiele Demo 3


Grund Dropdown-Menü

Wenn die Maus auf die angegebenen Elemente bewegt wird, wird Drop-Down-Menü erscheint.

Beispiele

<Style>
.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>
/ * 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;

Beispiele

.dropdown-Inhalt {
rechts: 0;
}
Versuchen »

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.