Как создать: всплывающее меню

Узнайте, как использовать CSS для создания всплывающего меню.

Создайте всплывающее меню с наведением

Создайте всплывающее меню, которое отображается, когда пользователь наводит курсор на элемент.

Шаг 1 - Добавление HTML:

<div class="dropup">
  <button class="dropbtn">Всплывающее</button>
  <div class="dropup-content">
    <a href="#">Ссылка 1</a>
    <a href="#">Ссылка 2</a>
    <a href="#">Ссылка 3</a>
  </div>
</div>

Пример объяснение:

Вы можете использовать любой элемент для открытия всплывающего меню, например, элемент <button>, <a> или <p>.

Используйте контейнерный элемент (например, <div>) для создания всплывающего меню и добавьте в него всплывающие ссылки.

Используйте элемент <div>, чтобы обернуть кнопку и <div>, чтобы точно определить положение всплывающего меню с помощью CSS.

Шаг 2 - Добавление CSS:

/* Нажимная кнопка */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Контейнер <div> - для позиционирования содержимого下拉 меню */
.dropup {
  position: relative;
  display: inline-block;
}
/* Содержимое下拉 меню (по умолчанию скрыто) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Ссылки в下拉 меню */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Изменение цвета ссылки при наведении мыши */
.dropup-content a:hover {background-color: #ddd}
/* Отображение下拉 меню при наведении мыши */
.dropup:hover .dropup-content {
  display: block;
}
/* Измените цвет фона кнопки, когда содержимое下拉 меню отображается */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

попробуйте сами

Пример объяснение:

Мы установили стиль фона, отступы и другие стили для кнопки.

.dropup класс position: relativeкогда мы хотим поместить содержимое下拉 меню над кнопкой (используя position: absolute), это обязательно.

.dropup-content класс содержит реальное下拉 меню. По умолчанию он скрыт и будет отображаться при наведении мыши (см. ниже). Обратите внимание, что минимальная ширина установлена в 160px. Вы можете изменить это значение по своему усмотрению. Совет: если вы хотите, чтобы ширина содержимого下拉 меню была такой же, как у кнопки, установите ширину в 100% (и используйте на экранах малого размера) overflow: auto для включения скроллинга).

Мы не используем рамку, а вместо этого используем box-shadow параметр, чтобы下拉 меню выглядело как卡片. Мы также используем z-index Разместите下拉 меню перед другими элементами.

:hover Выборщик используется для отображения выпадающего меню при наведении мыши на кнопку