Ein Dropdown Menü mit HTML und CSS erstellen

PDF herunterladen
unter Mitarbeit von wikiHow Staff

PDF herunterladen

In diesem wikiHow 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/3234689-1.jpg\/v4-460px-3234689-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/3234689-1.jpg\/v4-728px-3234689-1.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/3234689-2.jpg\/v4-460px-3234689-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/3234689-2.jpg\/v4-728px-3234689-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dies ist der Code, der den verwendeten Code-Typ für den Rest des Dokuments bestimmt: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 >
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/3234689-3.jpg\/v4-460px-3234689-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/3234689-3.jpg\/v4-728px-3234689-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] 
     . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 #px 
 ; 
 font-size 
 : 
 #px 
 ; 
 border 
 : 
 none 
 ; 
 }
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/3234689-4.jpg\/v4-460px-3234689-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/3234689-4.jpg\/v4-728px-3234689-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c2\/3234689-5.jpg\/v4-460px-3234689-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/3234689-5.jpg\/v4-728px-3234689-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/3234689-6.jpg\/v4-460px-3234689-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/3234689-6.jpg\/v4-728px-3234689-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/3234689-7.jpg\/v4-460px-3234689-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/3234689-7.jpg\/v4-728px-3234689-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/15\/3234689-8.jpg\/v4-460px-3234689-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/15\/3234689-8.jpg\/v4-728px-3234689-8.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gib den folgenden Code ein, um anzugeben, dass du mit dem CSS-Teil des Dokuments fertig bist: 
     </ 
 style 
 > 
 </ 
 head 
 >
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/3234689-9.jpg\/v4-460px-3234689-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/3234689-9.jpg\/v4-728px-3234689-9.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/3234689-10.jpg\/v4-460px-3234689-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/3234689-10.jpg\/v4-728px-3234689-10.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/3234689-11.jpg\/v4-460px-3234689-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/3234689-11.jpg\/v4-728px-3234689-11.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gib hierfür die folgenden Tags ein. Dies zeigt das Ende des Codes für das Dropdown-Menü an: 
     </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/3234689-12.jpg\/v4-460px-3234689-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/3234689-12.jpg\/v4-728px-3234689-12.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Der Code sollte ähnlich aussehen wie der folgende: [2] 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 16 
 px 
 ; 
 font-size 
 : 
 16 
 px 
 ; 
 border 
 : 
 none 
 ; 
 } 
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
 . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 200 
 px 
 ; 
 z-index 
 : 
 1 
 ; 
 } 
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 12 
 px 
 16 
 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 
 > 
 < 
 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]
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

Verwandte wikiHows

Kommentare in HTML Code einfügen
HTM Dateien öffnen
Ein Hintergrund Bild in HTML einfügen
Eine Webseite mit einfachem HTML hacken
Eine einfache Webseite mit HTML gestalten
Einen E mail Link in HTML erstellen
Die Farbe einer Schaltfläche in HTML ändern
HTML Dateien bearbeiten
Bilder mit HTML einfügen
Text in HTML zentrieren
Text in HTML blinken lassen
Einen Download Knopf auf einer Webseite erstellen
Mit HTML innerhalb von einer Seite verlinken
In HTML eine Linie einfügen
Werbeanzeige

Referenzen

  1. ↑ https://www.w3schools.com/howto/howto_css_dropdown.asp
  2. ↑ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
  3. ↑ https://www.w3schools.com/howto/howto_js_dropdown.asp

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 42.252 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige