Wie man einen: "Mehr"-Knopf in der Navigationsleiste erstellt

Lernen Sie, wie man einen "Mehr"-Knopf erstellt.

Erstellen Sie eine Dropdown-Menü-Navigationsleiste

Wird der Mauszeiger auf ein Element in der Navigationsleiste bewegt, wird ein Dropdown-Menü angezeigt.

Schritt 1 - HTML hinzufügen:

<div class="navbar">
  <a href="#home">Startseite</a>
  <a href="#news">Nachrichten</a>
  <div class="dropdown">
    <button class="dropbtn">Mehr
      <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 erläutert:

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

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

Verwenden Sie ein <div>-Element, um die Schaltfläche und ein anderes <div>-Element einzukapseln, um das Dropdown-Menü mit CSS korrekt zu positionieren.

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-Menü-Container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown-Menü-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 dem Handy wichtig */
  margin: 0; /* Wichtig für die vertikale Ausrichtung auf dem Handy */
}
/* Fügt dem Navigationslinks bei der 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 der Mausüberlagerung eine graue Hintergrundfarbe hinzu */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Das Dropdown-Menü wird bei der Mausüberlagerung angezeigt */
.dropdown:hover .dropdown-content {
  display: block;
}

Probieren Sie es selbst aus

Beispiel erläutert:

Wir haben für die Navigationsleiste und die Navigationslinks 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 Kontainer. Da dies ein <div>-Element und nicht ein <a>-Element ist, müssen wir es fließend machen, um sicherzustellen, dass es neben dem Link bleibt.

.dropdown-content Klasse enthält das tatsächliche Dropdown-Menü. 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 beliebig ändern.

Wir haben keine Umrandung verwendet, sondern box-shadow Eigenschaft, um das Dropdown-Menü wie eine "Karte" aussehen zu lassen. Wir verwenden auch z-index Platzieren Sie das Dropdown-Menü vor anderen Elementen.

:hover Der Selector wird verwendet, um das Dropdown-Menü anzuzeigen, wenn der Benutzer die Maus auf den Dropdown-Menü-Knopf bewegt.

Verwandte Seiten

Anleitung:CSS 下拉菜单

Anleitung:Wie man eine klickbare Dropdown-Menü erstellt

Anleitung:CSS 导航栏

Anleitung:Wie man eine responsive obere Navigationsleiste erstellt