Dropdown-Menü

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 20 von 35.

Ein Dropdown-Menü ist ein Navigationselement, das weitere Links anzeigt, wenn der Benutzer mit der Maus darüber fährt oder es fokussiert. Während Dropdowns mit JavaScript erstellt werden können, konzentrieren wir uns in diesem Kapitel auf einen reinen CSS-Ansatz, der :hover oder :focus-within verwendet, um das versteckte Menü anzuzeigen.

Warum man sie verwendet:

Spart Platz in Navigationsleisten.
Hält die Benutzeroberfläche sauber und übersichtlich.
Funktioniert bei richtiger Anpassung gut für Mobile-First- und responsive Designs.

HTML:

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

CSS:

//Das .dropdown ist position: relative 
//damit der Dropdown-Inhalt mit position: absolute korrekt positioniert werden kann.
.dropdown {
  position: relative;
  display: inline-block;
}

//Der .dropdown-content ist standardmäßig mit display: none ausgeblendet.
.dropdown-content {
  display: none;
  position: absolute;
}

//Wenn der Benutzer den Mauszeiger über den .dropdown-Container bewegt, 
//wird der .dropdown-content mit display: block angezeigt.
.dropdown:hover .dropdown-content {
  display: block;
}

Mit diesem Code wird der Dropdown-Inhalt angezeigt, wenn Sie mit der Maus über den Dropdown-Container (einschließlich der Schaltfläche) fahren.

Aufgabe

Einfach

Ihnen wird das HTML für ein Dropdown-Menü mit einer Schaltfläche mit der Beschriftung "Select Color" und drei Optionen gegeben: Red, Green, Blue.

Ihre Aufgabe ist es, das Dropdown-Menü mit CSS so zu gestalten, dass:

Die Optionen standardmäßig ausgeblendet sind.
Die Optionen sichtbar werden, wenn der Benutzer mit der Maus über den Dropdown-Container fährt (hover).

Spickzettel

Ein Dropdown-Menü zeigt weitere Links an, wenn der Benutzer mit der Maus darüber fährt oder es fokussiert. Verwenden Sie :hover oder :focus-within, um das versteckte Menü anzuzeigen.

HTML-Struktur:

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

CSS-Implementierung:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Der Dropdown-Container verwendet position: relative, damit der Dropdown-Inhalt mit position: absolute positioniert werden kann. Der Inhalt ist standardmäßig mit display: none ausgeblendet und wird beim Hovern mit display: block angezeigt.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown menu</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
      background-color: #f0f0f0;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: 1px solid #333;
      border-radius: 5px;
      background-color: #ffffff;
    }

    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #ffffff;
      min-width: 160px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #f2f2f2;
    }

    /* Show dropdown on hover or focus */
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {

    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="dropdown-button">Select Color</button>
    <div class="dropdown-content">
      <a href="#">Red</a>
      <a href="#">Green</a>
      <a href="#">Blue</a>
    </div>
  </div>

</body>
</html>