Jak utworzyć: przycisk "Więcej" w nawigacji

poprzednia strona Przyciski 'następna/poprzednia strona'
Następna strona Przycisk blokowy

Naucz się, jak utworzyć przycisk "Więcej".

Przycisk "Więcej" w nawigacji

Utwórz nawigację menu rozwijanego

Kiedy użytkownik przeniesie mysz na 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">Więcej
      <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śnia:

Otwórz menu rozwijane za pomocą dowolnego elementu, na przykład przycisku <button>, elementu <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> za pomocą elementu <div>, aby poprawnie ustawić 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 menu rozwijanego */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Przycisk menu rozwijanego */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Dla wertykalnego wyważenia na telefonach */
  margin: 0; /* Ważne dla wertykalnego wyważenia na telefonach */
}
/* Dodaj czerwony kolor tła do linków paska nawigacji 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 rozwijanego 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śnia:

Ustawiliśmy tło, marginesy i inne style dla paska nawigacji i linków nawigacyjnych.

Ustawiliśmy tło, marginesy i inne style dla przycisku menu rozwijanego.

.dropdown klasa to .dropdown-content kontener. Ponieważ jest to element <div>, a nie <a>, musimy go ustawić na przepływ, aby pozostał obok linku.

.dropdown-content klasa zawiera rzeczywiste menu rozwijane. Domyślnie jest ukryty, ale zostanie wyświetlony 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 Selektor wyświetla rozwijane menu, gdy użytkownik przenosi mysz nad przyciskiem menu rozwijanego.