Как сделать раскрывающееся меню при нажатии

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

Создание всплывающего раскрывающегося меню

Home About Contact

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

Шаг 1) добавить HTML:

<div class="dropdown">

    <button onclick="myFunction()" class="dropbtn">Dropdown</button>

    <div id="myDropdown" class="dropdown-content">

        <a href="#home">Home</a>

        <a href="#about">About</a>

        <a href="#contact">Contact</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;cursor: pointer;border-radius:10px;}

.dropbtn:hover, .dropbtn:focus {background-color: #2980B9;}

.dropdown {position: relative; display: inline-block;z-index:99999;}

.dropdown-content {display: none;position: absolute;background-color: #fff;border: 2px solid f1f1f1;border-radius:10px;min-width: 200px;overflow: auto;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 a:hover {background-color: #ddd;}

.show {display: block;}  

Пример как работает

Мы стилизовали выпадающую кнопку с фоновым цветом, отступом, эффектом наведения и т. д.

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

Класс .dropdown-content содержит фактическое раскрывающееся меню. По умолчанию он скрыт и будет отображаться при наведении (см. ниже). Обратите внимание, что минимальная ширина установлена на 160 пикселей. Не стесняйтесь изменить это. 

Совет: если вы хотите, чтобы ширина выпадающего содержимого была равна ширине кнопки раскрывающегося списка, установите ширину на 100 % (и переполнение:авто, чтобы включить прокрутку на маленьких экранах).

Вместо рамки мы использовали свойство 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');

      }

    }

  }

}