Пример:
Создание всплывающего раскрывающегося списка
Создайте раскрывающееся меню, которое появляется, когда пользователь перемещает указатель мыши на элемент.
Шаг 1) добавить HTML:
<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>
Пример как работает
Используйте любой элемент, чтобы открыть раскрывающееся меню, например <Button>, <a> или <p> элемент. Используйте элемент контейнера (например, <div>) для создания раскрывающегося меню и добавления раскрывающихся ссылок внутри него.Оберните элемент <div> вокруг кнопки и <div>, чтобы правильно расположить раскрывающееся меню с помощью CSS.
Шаг 2) добавить CSS:
.dropbtn {
background-color: #f4511e;
color: white;
padding: 16px;
font-size: 16px;
border: none;
border-radius:10px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
border-radius:10px;
border: 2px solid f1f1f1;
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: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);}
Пример как работает
Мы создали стиль выпадающего кнопки с фоном-цвет, обивка и т.д.
.dropdown класс использует position:relative, который необходим, когда мы хотим, чтобы раскрывающийся контент помещается прямо под кнопкой раскрывающегося списка (с помощью position:absolute ).
.dropdown-content класс содержит фактическое раскрывающееся меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание min-width. имеет значение 160пкс. Вы можете изменить это.
Совет: Если нужно, чтобы ширина раскрывающегося списка была такой же широкой, как и кнопка раскрывающегося списка, установите значение width 100% (и overflow:auto включите прокрутку на маленьких экранах).
Вместо использования границы мы использовали box-shadow свойство, чтобы выпадающее меню выглядело как «карточка». Мы также используем z-index для размещения раскрывающегося списка перед другими элементами.
:hover селектор используется для отображения раскрывающегося меню, когда пользователь перемещает указатель мыши на кнопку раскрывающегося списка.