Выпадающее меню CSS
Используйте CSS, чтобы создать эффект выпадающего меню, появляющегося при наведении мыши.
Пример выпадающего меню
Пример демонстрации 1
Пример
www.example.com
Пример демонстрации 2
Пример демонстрации 3
Базовое выпадающее меню
Когда мышь перемещается над указанным элементом, появится выпадающее меню.
Пример
Попробуйте сами »
Анализ примера
Раздел HTML:
Мы можем использовать любой HTML-элемент для открытия выпадающего меню, например <span> или элемент <button>.
Используйте элемент-контейнер (например, <div>) для создания содержимого выпадающего меню и разместите его в любом месте.
Используйте элемент <div>, чтобы обернуть эти элементы, а CSS — чтобы стилизовать содержимое выпадающего меню.
Раздел CSS:
.dropdownИспользование классаposition:relative, это установит размещение содержимого выпадающего меню под выпадающей кнопкой (с использованиемposition:absoluteправого нижнего положения ).
.dropdown-contentclass — это фактическое выпадающее меню. По умолчанию оно скрыто и будет отображаться, когда мышь перемещается над указанным элементом. Примечаниеmin-widthУстановите значение 160px. Вы можете свободно его изменять.Примечание:Если вы хотите, чтобы содержимое выпадающего меню имело ту же ширину, что и выпадающая кнопка, вы можете установитьwidthкак 100% (overflow:autoустановлено, чтобы разрешить прокрутку на маленьких экранах).
Мы используемbox-shadowАтрибут делает выпадающее меню похожим на «карточку».
:hoverСелектор используется для отображения выпадающего меню, когда пользователь наводит мышь на выпадающую кнопку.
выпадающее меню
Создайте выпадающее меню, позволяющее пользователям выбрать элемент из списка:
Этот пример похож на предыдущий, в котором мы добавили ссылки в выпадающий список и задали стили:
Пример
/* Стили выпадающей кнопки */
.dropbtn {
background-color: #4C7EAF;
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);
}
/* Ссылки выпадающего меню */
.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: #4877A6;
}
</style>
<div class="dropdown">
<button class="dropbtn">выпадающее меню</button>
<div class="dropdown-content">
<a href="#">Пример 1</a>
<a href="#">Пример 2</a>
<a href="#">Пример 3</a>
</div>
</div>
Попробуйте сами »
Выравнивание содержимого выпадающего меню
float:left;
float:right;
Если вы хотите, чтобы содержимое выпадающего меню, обтекаемого справа, выравнивалось справа налево, а не слева направо, можно добавить следующий код:right: 0;
Другие примеры
Выпадающее меню с изображениями
В этом примере показано, как добавить изображения в выпадающее меню.
Выпадающее меню навигационной панели
В этом примере показано, как добавить выпадающее меню в навигационную панель.