Wie erstelle ich ein HTML-Dropdown-Menü? Experten zeigen Ihnen, wie Sie Dropdown-Menüs in HTML und CSS erstellen-HTML-Tutorial-php.cn

Wie erstelle ich ein HTML-Dropdown-Menü? Experten zeigen Ihnen, wie Sie Dropdown-Menüs in HTML und CSS erstellen

云罗郡主

Freigeben： 2018-11-02 08:58:10

Original

26138 Leute haben es durchsucht

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” >

Nach dem Login kopieren

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>

Nach dem Login kopieren

Der Effekt ist wie gezeigt:

Wie erstelle ich ein HTML-Dropdown-Menü? Experten zeigen Ihnen, wie Sie Dropdown-Menüs in HTML und CSS erstellen

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!