Ein Dropdown Menü mit HTML und CSS erstellen

In diesem How.com.vn zeigen wir dir, wie du mit HTML und CSS ein Dropdown-Menü für deine Webseite erstellst. Das Dropdown-Menü wird eingeblendet, wenn jemand mit der Maus über den Button fährt. Sobald es eingeblendet ist, kann der Benutzer auf eine der Optionen darin klicken, um die entsprechende Seite zu öffnen.

Vorgehensweise

PDF herunterladen

1
Öffne deinen HTML Texteditor. Du kannst einen einfachen Texteditor wie Notepad oder TextEdit nehmen oder einen fortgeschritteneren Texteditor wie Notepad++.
- Wenn du Notepad++ nutzen möchtest, dann wähle zunächst oben im Fenster aus dem Sprache-Menü unter "H" HTML aus.
2
Gib den Header für das Dokument ein. Dies ist der Code, der den verwendeten Code-Typ für den Rest des Dokuments bestimmt:
```
<!DOCTYPE html><html><head><style>
```
3
Erstelle das Dropdown-Menü selbst. Tippe den folgenden Code ein, um die Größe und die Farbe des Dropdown-Menüs zu bestimmen. Achte dabei darauf, dass du "#" durch die gewünschte Zahl ersetzt (je größer die Zahl, desto größer dein Dropdown-Menü). Du kannst außerdem die Werte von "background-color" und "color" durch eine andere Farbe (oder einen HTML-Farbcode) deiner Wahl ersetzen:^{[1]XForschungsquelle}
```
.dropbtn {    background-color: black;    color: white;    padding: #px;    font-size: #px;    border: none;}
```
4
Gib an, dass du deine Links im Dropdown-Menü angeben möchtest. Da du später Links ins Dropdown-Menü einfügen wirst, kannst du sie mit dem folgenden Code eingeben:
```
.dropdown {    position: relative;    display: inline-block;}
```
5
Lege das Aussehen des Dropdown-Menüs fest. Der folgende Code bestimmt die Größe des Dropdown-Menüs, die Position, wenn andere Elemente auf der Webseite involviert sind, und die Farbe. Tausche den "#" Bereich bei "min-width" durch die gewünschte Zahl aus (z. B. 250) und ändere "background-color" auf eine Farbe oder einen HTML-Farbcode deiner Wahl:
```
.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: #px;    z-index: 1;}
```
6
Füge dem Inhalt des Dropdown-Menüs Details hinzu. Der folgende Code betrifft die Textfarbe und die Größe des Buttons des Dropdown-Menüs. Ersetze "#" durch die gewünschte Pixelgröße für die Button-Größe:
```
.dropdown-content a {    color: black;    padding: #px #px;    text-decoration: none;    display: block;}
```
7
Bearbeite das Verhalten des Dropdown-Menüs, wenn du mit der Maus darüberfährst. Wenn du mit der Maus über den Button des Dropdown-Menüs fährst, sollten sich ein paar Farben ändern. Die erste "background-color" Zeile bezieht sich auf die Veränderung der Farbe, die ausgeführt wird, wenn du einen Eintrag im Dropdown-Menü auswählst, während die zweite "background-color" Zeile sich auf die Farbe des Buttons bezieht. Idealerweise sind beide Farben heller als wenn sie nicht ausgewählt sind:
```
.dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;}
```
8
Schließe den CSS-Bereich. Gib den folgenden Code ein, um anzugeben, dass du mit dem CSS-Teil des Dokuments fertig bist:
```
</style></head>
```
9
Erstelle den Namen für den Button des Dropdown-Menüs. Gib den folgenden Code ein und ersetze dabei "Name" durch das, was der Button anzeigen soll (z. B. Menü):
```
<div class="dropdown"><button class="dropbtn">Name</button><div class="dropdown-content">
```
10
Füge die Links für dein Dropdown-Menü ein. Alle Einträge im Menü sollten auf etwas verlinken, sei es eine Seite auf deiner Webseite oder eine externe Webseite. Du kannst dem Dropdown-Menü Einträge hinzufügen, indem du den folgenden Code eingibst und dabei https://www.website.com durch die URL des Links ersetzt (behalte die Anführungszeichen) und "Name" durch den Namen des Links.
```
<a href="https://www.website.com">Name</a><a href="https://www.website.com">Name</a><a href="https://www.website.com">Name</a>
```
11
Schließe dein Dokument ab. Gib hierfür die folgenden Tags ein. Dies zeigt das Ende des Codes für das Dropdown-Menü an:
```
</div></div></body></html>
```

How.com.vn Deutsch: Step 12 Sieh dir den Code deines Dropdown-Felds an.

Der Code sollte ähnlich aussehen wie der folgende:^{[2]XForschungsquelle}

<!DOCTYPE html><html><head><style>.dropbtn {    background-color: black;    color: white;    padding: 16px;    font-size: 16px;    border: none;}.dropdown {    position: relative;    display: inline-block;}.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: 200px;    z-index: 1;}.dropdown-content a {    color: black;    padding: 12px 16px;    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><div class="dropdown"><button class="dropbtn">Social Media</button><div class="dropdown-content"><a href="https://www.google.com">Google</a><a href="https://www.facebook.com">Facebook</a><a href="https://www.youtube.com">YouTube</a></div></div></body></html>

Werbeanzeige

Tipps

Teste deinen Code immer, bevor du ihn auf der Webseite postest.
Die Anleitung oben ist für ein Dropdown-Menü, das sich aktiviert, wenn du mit der Maus über den Button des Menüs fährst. Wenn du ein Dropdown-Menü erzeugen möchtest, das nur beim Anklicken eingeblendet wird, musst du JavaScript nutzen.^{[3]XForschungsquelle}

Werbeanzeige

Warnungen

HTML-Farben sind relativ eingeschränkt, wenn du Bezeichnungen wie "black" oder "green" verwendest. Du kannst hier einen HTML-Farbcode-Generator finden, mit dem du individuelle Farben erzeugen und nutzen kannst.

Werbeanzeige