How to create: The "More" button in the navigation bar

Learn how to create a "More" button.

Create a dropdown menu navigation bar

A dropdown menu will appear when the user moves the mouse over the elements within the navigation bar.

第一步 - 添加 HTML：

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <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>

Eksempel forklaring:

Use any element to open the dropdown menu, such as <button>, <a>, or <p> elements.

Create a dropdown menu using a container element (such as <div>) and add dropdown menu links to it.

Wrap the button and another <div> element with a <div> element to properly position the dropdown menu using CSS.

第二步 - 添加 CSS：

/* Navigation bar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Links within the navigation bar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Dropdown menu container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown menu button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* For vertical alignment on mobile devices */
  margin: 0; /* Vigtigt for lodret justering på mobiltelefoner */
}
/* Tilføj en rød baggrundsfarve til navigationsfeltets links ved museoverførsel */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Indholdet af rullemenuen (er som standard skjult) */
.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 i rullemenuen */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Tilføj en grå baggrundsfarve til rullemenuens links ved museoverførsel */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Vis rullemenuen ved museoverførsel */
.dropdown:hover .dropdown-content {
  display: block;
}

Prøv det selv

Eksempel forklaring:

Vi har allerede sat baggrundsfarve, indrykning og andre stilarter for navigationsfeltet og navigationslinks.

Vi har allerede sat baggrundsfarve, indrykning og andre stilarter for rullemenuknappen.

.dropdown klassen er .dropdown-content containeren. Da dette er en <div>-element, ikke en <a>-element, skal vi gøre det flydende for at sikre, at det forbliver ved siden af linket.

.dropdown-content klassen indeholder den faktiske rullemenu. Den er som standard skjult og vises ved museoverførsel (se nedenfor). Bemærk, at minimumsbredden er sat til 160px. Du kan frit ændre denne indstilling.

Vi bruger ikke kanter, men box-shadow Egenskab, så rullemenuen ser ud som et 'kort'. Vi bruger også z-index Placer rullemenuen foran andre elementer.

:hover Vælgeren bruges til at vise rullemenuen, når brugeren flytter musen over rullemenuknappen.

Relaterede sider

TilvejebringeCSS dropdown menu

TilvejebringeSådan opretter du en klikbar rullemenu

TilvejebringeCSS navigation bar

TilvejebringeSådan opretter du en responsiv topnavigationsmenu