Wie man: Dropdown-Menü-Navigationsleiste

Lernen Sie, wie Sie eine Dropdown-Menü-Navigationsleiste erstellen.

Erstellen Sie eine Dropdown-Menü-Navigationsleiste

Wenn der Benutzer den Cursor auf ein Element in der Navigationsleiste bewegt, erscheint ein Dropdown-Menü.

Schritt 1 - HTML hinzufügen:

<div class="navbar">
  <a href="#home">Startseite</a>
  <a href="#news">Nachrichten</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

Beispiel Erklärung:

Öffnen Sie das Dropdown-Menü mit jedem Element, z.B. <button>, <a> oder <p>-Element.

Erstellen Sie ein Dropdown-Menü mit einem Container-Element (wie <div>) und fügen Sie darin die Dropdown-Menü-Links hinzu.

Um das Dropdown-Menü korrekt zu positionieren, umwickeln Sie die Schaltfläche und einen anderen <div>-Element, mit CSS.

Schritt 2 - CSS hinzufügen:

/* Navigationsleiste-Container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Links im Navigationsleiste */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Dropdown-Container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown-Schaltfläche */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Für die vertikale Ausrichtung auf mobilen Geräten sehr wichtig */
  margin: 0; /* Wichtig für die vertikale Ausrichtung auf dem Handy */
}
/* Fügt den Navigationsleistenlinks bei Mausüberlagerung eine rote Hintergrundfarbe hinzu */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Dropdown-Menü-Inhalte (standardmäßig versteckt) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links im Dropdown-Menü */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Fügt dem Dropdown-Menü-Link bei Mausüberlagerung eine graue Hintergrundfarbe hinzu */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Das Dropdown-Menü wird bei Mausüberlagerung angezeigt */
.dropdown:hover .dropdown-content {
  display: block;
}

Versuchen Sie es selbst

Beispiel Erklärung:

Wir haben für die Navigationsleiste und die Navigationsleistenlinks Hintergrundfarbe, Innenabstand und andere Stile festgelegt.

Wir haben für den Dropdown-Menüknopf Hintergrundfarbe, Innenabstand und andere Stile festgelegt.

.dropdown Klasse ist .dropdown-content Behälter. Da dies ein <div>-Element und nicht ein <a>-Element ist, müssen wir es flott machen, um sicherzustellen, dass es neben dem Link bleibt.

.dropdown-content Klassen, die das tatsächliche Dropdown-Menü enthalten. Es ist standardmäßig versteckt und wird bei der Mausüberlagerung angezeigt (siehe unten). Beachten Sie, dass die Mindestbreite auf 160px gesetzt ist. Sie können diese Einstellung frei ändern.

Wir haben keine Rahmen verwendet, sondern box-shadow Eigenschaft, um das Dropdown-Menü so aussehen zu lassen, als ob es eine "Karte" wäre. Wir verwenden auch z-index Platzieren Sie das Dropdown-Menü vor anderen Elementen.

:hover Selektoren werden verwendet, um das Dropdown-Menü anzuzeigen, wenn der Benutzer die Maus auf den Dropdown-Menüknopf bewegt.

Klickbare Dropdown-Menüs in der Navigationsleiste

Versuchen Sie es selbst

Verwandte Seiten

Tutorium:CSS 下拉菜单

Tutorium:Wie man eine klickbare Dropdown-Menü erstellt

Tutorium:CSS 导航栏

Tutorium:Wie man eine responsive obere Navigationsleiste erstellt