Heim >Web-Frontend >HTML-Tutorial >Wie erstelle ich ein HTML-Dropdown-Menü? Experten zeigen Ihnen, wie Sie Dropdown-Menüs in HTML und CSS erstellen
Wie erstelle ich ein HTML-Dropdown-Menü? Experten zeigen Ihnen, wie Sie Dropdown-Menüs in HTML und CSS erstellen
- 云罗郡主Original
- 2018-11-01 16:09:1526223Durchsuche
Wie erstelle ich ein HTML-Dropdown-Menü? Was ist der HTML-Dropdown-Menücode? Diese sind für Neulinge, die gerade erst anfangen, nicht ganz klar. Die folgenden Experten zeigen Ihnen, wie Sie ein Dropdown-Menü in HTML und CSS erstellen.
Viele Leute werden feststellen, dass, wenn sie mit der Maus über die Navigation fahren, ein Dropdown-Menü erscheint. Wenn ein Dropdown-Menü erscheint, kann der Benutzer normalerweise auf eine der Optionen klicken, um auf eine andere URL zuzugreifen .
1: Zuerst öffnen wir Notepad ++. Wenn Sie Notepad ++ verwenden, stellen Sie bitte das Menü „Sprache“ oben im HTML-Fenster auf „H“. [Empfohlenes Lernen: Html5-Tutorial]
Zweitens: Erstellen Sie den Dropdown-Menücode, geben Sie den folgenden Code ein, um die Größe und Farbe des Dropdown-Menüs zu bestimmen, und ersetzen Sie ihn unbedingt „#“ durch die Nummer, die Sie verwenden möchten (Je höher die Nummer, desto größer das Dropdown-Menü). Sie können die Werte „Hintergrundfarbe“ und „Farbe“ auch durch eine beliebige Farbe (oder einen HTML-Farbcode) Ihrer Wahl ersetzen.
Drei: Zeigt an, dass Sie den Link in das Dropdown-Menü einfügen möchten. Sie können dem Dropdown-Menü auch Links hinzufügen. Sie können sie durch Eingabe des Codes in das Dropdown-Menü einfügen.
Viertens: Gestalten Sie das Erscheinungsbild des Dropdown-Menüs. Sie können die Größe des Dropdown-Menüs sowie die Position und Farbe anderer Webseitenelemente bestimmen. Ersetzen Sie unbedingt das „#“ im Teil „Mindestbreite“ durch eine Zahl (z. B. 250) und ändern Sie die Überschrift „Hintergrundfarbe“ in Ihre Lieblingsfarbe.
Fünftens: Fügen Sie dem Inhalt des Dropdown-Menüs Details hinzu. Wenn wir uns mit der Textfarbe des Dropdown-Menüs und der Größe der Dropdown-Menüschaltfläche befassen, ersetzen Sie unbedingt das „#“. " mit der Anzahl der Pixel, um die Größe der Schaltfläche anzugeben.
Sechs: Bearbeiten Sie den Hover-Vorgang des Dropdown-Menüs. Wenn Sie mit der Maus über die Dropdown-Menüschaltfläche fahren, müssen Sie mehrere Farben ändern Im Dropdown-Menü wird die Farbe angezeigt.
Sieben: Als nächstes erstellen wir den Namen der Dropdown-Schaltfläche. Geben Sie den folgenden Code ein und stellen Sie sicher, dass Sie „Name“ durch den Namen der gewünschten Dropdown-Schaltfläche ersetzen (z. B. Menü):
< div class = “dropdown” > < button class = “dropbtn” >名称< / button > < div class = “dropdown-content” >
Acht: Fügen Sie einen Link zum Dropdown-Menü hinzu. Jede Unteroption im Dropdown-Menü sollte mit einem Inhalt verknüpft sein, bei dem es sich um eine Seite auf der Website oder um eine externe Website handeln kann kann zum Dropdown-Menü hinzugefügt werden. Stellen Sie sicher, dass http://www.php.cn/ das Ersetzen des Linknamens durch die Linkadresse (behalten Sie die Anführungszeichen) und „Name“ funktioniert.
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: black;
color: white;
padding: #px;
font-size: #px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: #px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: #px #px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdown-content">
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
</div>
</div>
</body>
</html>Der Effekt ist wie gezeigt:
Wie funktioniert das HTML-Dropdown-Menü oben? Experten zeigen Ihnen, wie Sie Dropdown-Menüs in HTML und CSS erstellen. Wenn Sie mehr über das HTML5-Online-Handbuch erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie erstelle ich ein HTML-Dropdown-Menü? Experten zeigen Ihnen, wie Sie Dropdown-Menüs in HTML und CSS erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!