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

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

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

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

Шаг 1 - Добавьте HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Ссылка 1</a>
    <a href="#">Ссылка 2</a>
    <a href="#">Ссылка 3</a>
  </div>
</div>

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

Меню dropdown можно открыть с помощью любого элемента, например, <button>, <a> или <p>.

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

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

第二步 - Добавьте CSS:

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

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

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

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

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

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

Шаг 3 - Добавьте JavaScript:

/* При клике на кнопку переключайте скрытие и отображение содержимого спускающегося меню */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Если пользователь кликнул вне спускающегося меню, закройте меню
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

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

Связанные страницы

Учебник:CSS выпадающий список

Учебник:Как создать выпадающий список с悬ением