Jak utworzyć: nawigację z menu rozwijanym

Poprzednia strona Kaskadowe menu rozwijane
Następna strona Menu rozwijane w panelu bocznym nawigacji

Naucz się, jak utworzyć nawigację z menu rozwijanym.

Menu rozwijane w nawigacji

Utwórz nawigację z menu rozwijanym

Kiedy użytkownik przeniesie mysz nad element nawigacji, pojawi się menu rozwijane.

Krok 1 - Dodaj HTML:

<div class="navbar">
  <a href="#home">Strona główna</a>
  <a href="#news">Wiadomości</a>
  <div class="dropdown">
    <button class="dropbtn">Rozwijane</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>

Przykład wyjaśnienia:

Otwórz menu rozwijane za pomocą dowolnego elementu, na przykład <button>, <a> lub elementu <p>.

Utwórz menu rozwijane za pomocą elementu kontenera (np. <div>) i dodaj do niego linki menu.

Otocz przycisk i inny element <div>, aby poprawnie zlokalizować menu rozwijane za pomocą CSS.

Krok 2 - Dodaj CSS:

/* Kontener nawigacji */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Linki w nawigacji */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Kontener rozwijany */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Przycisk rozwijany */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Ważne dla wertykalnego wyważenia na telefonach */
  margin: 0; /* Ważne dla wertykalnego wyważenia na telefonach */
}
/* Dodaj czerwony kolor tła do linków w pasku nawigacyjnym przy najechaniu myszą */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Zawartość rozwijanego menu (domyślnie ukryta) */
.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;
}
/* Linki w rozwijanym menu */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Dodaj szary kolor tła do linków w rozwijanym menu przy najechaniu myszą */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Wyświetl rozwijane menu przy najechaniu myszą */
.dropdown:hover .dropdown-content {
  display: block;
}

Spróbuj sam

Przykład wyjaśnienia:

Ustawiliśmy już style takie jak kolor tła, marginesy wewnętrzne dla linków w pasku nawigacyjnym.

Ustawiliśmy już style takie jak kolor tła, marginesy wewnętrzne dla przycisku menu rozwijanego.

.dropdown Klasa to .dropdown-content Kontener. Ponieważ jest to element <div>, a nie <a>, musimy go umieścić w przepływie, aby pozostał obok linku.

.dropdown-content Klasa zawiera rzeczywiste menu rozwijane. Domyślnie jest ukryty, ale wyświetli się po najechaniu myszą (patrz niżej). Uwaga, minimalna szerokość ustawiona na 160px. Możesz swobodnie zmienić to ustawienie.

Nie używamy krawędzi, ale zamiast tego box-shadow Atrybut, aby rozwijane menu wyglądało jak kartę. Używamy również z-index Umieść rozwijane menu przed innymi elementami.

:hover Wybieracz jest używany do wyświetlania rozwijanego menu, gdy użytkownik przeniesie mysz nad przycisk menu rozwijanego.