PDF download PDF herunterladen PDF download 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 download PDF herunterladen
  1. 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. Dies ist der Code, der den verwendeten Code-Typ für den Rest des Dokuments bestimmt:
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
    
  3. 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. 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. 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. 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. 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. Gib den folgenden Code ein, um anzugeben, dass du mit dem CSS-Teil des Dokuments fertig bist:
     </ 
     style 
     > 
     </ 
     head 
     > 
    
  9. 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. 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. Gib hierfür die folgenden Tags ein. Dies zeigt das Ende des Codes für das Dropdown-Menü an:
     </ 
     div 
     > 
     </ 
     div 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  12. 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

Über dieses wikiHow

Diese Seite wurde bisher 43.216 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige