Menu rozwijane CSS

Utwórz rozwijane listy, które można nadmuchać za pomocą CSS.

Pokaz: Przycisk rozwijany

Przykład

Przenieś wskaźnik myszy na poniższy przykład:

Tekst rozwijany

Hello World!

Link 1 Link 2 Link 3
Zdjęcie:kawa
kawa
Kawa

Podstawowe menu rozwijane

Tworzy okno rozwijane, które pojawia się, gdy użytkownik przenosi nad nim myszkę.

Przykład

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Przejdź nad mną myszką</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Spróbuj sam

Przykład wyjaśnienia:

HTML

Otwórz zawartość menu rozwijanego za pomocą dowolnego elementu, na przykład <span> lub przycisku <button>.

Użyj elementu kontenerowego (np. <div>) do utworzenia zawartości rozwijanej i dodaj do niego dowolną zawartość.

Otocz te elementy elementem <div>, używając CSS do prawidłowego umieszczenia zawartości rozwijanej.

CSS

.dropdown Klasa używa position:relativeKiedy chcemy umieścić zawartość rozwijaną poniżej przycisku rozwijanego (używając position:absolute) w takim przypadku należy użyć tej klasy.

.dropdown-content Klasa zapisuje rzeczywistą zawartość menu rozwijanego. Domyślnie jest ukryta i wyświetla się po najechaniu (patrz niżej). Proszę zauważyć,min-width Ustawiona na 160px. Można zmieniać to ustawienie w dowolnym momencie. Wskazówka: Jeśli chcesz, aby szerokość zawartości rozwijanej była taka sama jak szerokość przycisku rozwijanego, ustaw szerokość na 100％ (ustaw) overflow:auto Można to zrobić w małym ekranie, przewijanie.

Użyliśmy CSS box-shadow właściwości, zamiast ramki, aby menu rozwijane wyglądało jak kartka.

gdy użytkownik przeniesie mysz na przycisk rozwijany,:hover Wybieracz służy do wyświetlania menu rozwijanego.

Menu rozwijane

Utwórz menu rozwijane, które pozwala użytkownikowi wybrać jedną z opcji z listy:

Link 1 Link 2 Link 3

Podobnie jak w poprzednim przykładzie, różni się tylko tym, że w polu rozwijanym dodaliśmy linki i ustaliliśmy dla nich styl, aby pasował do stylu przycisku rozwijanego:

Przykład

<style>
/* 设置下拉按钮的样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉内容（默认隐藏） */
.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;
}
/* 下拉链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 悬停时更改下拉链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 显示下拉内容时，更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Spróbuj sam

Zawartość menu rozwijanego wyrównana do prawej

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3

Jeśli chcesz, aby menu rozwijane pojawiało się od prawej do lewej zamiast od lewej do prawej, dodaj right: 0;：

Przykład

.dropdown-content {
  right: 0;
}

Spróbuj sam

Więcej przykładów

1 - Obraz rozwijany

Jak dodać obrazy i inne treści do pola rozwijanego.

Najedź mysz na obraz:

kawa
kawa
Kawa

Spróbuj sam

2 - Menu rozwijane

Jak dodać menu rozwijane do paska nawigacyjnego.

Spróbuj sam