CSS Випадаючи (що розкриваються) списки
Створення випадаючого (що розкривається) списку за допомогою CSS.
Демо: Приклад випадаючого списку
Наведіть курсор на приклади нижче:
Вітаємо вас! Ми з України!
Основний випадаючий (що розкривається) список
Створіть випадаючий список, який з’являється, коли користувач наводить вказівник миші на елемент.
Приклад
<style>
.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);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Миша наді мною</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Спробуйте самі »
Пояснення прикладу
HTML) Використовуйте будь-який елемент, щоб відкрити випадаючий контент, наприклад елемент <span> або <button>.
Використовуйте елемент контейнера (наприклад, <div>), щоб створити випадаючий контент та додати в нього все, що ви хочете.
Огорніть елемент <div> навколо елементів, щоб правильно размістити контент, що відкривається, за допомогою CSS.
CSS). Клас .dropdown використовує position: relative, який потрібен, коли ми хочемо, щоб зміст списку, що розкривається, розміщувався прямо під кнопкою списку, що розкривається (використовуючи position: absolute).
Клас .dropdown-content містить фактичний контент, що розкривається. За замовчуванням він прихований і буде відображатися при наведенні миші (див. нижче). Зверніть увагу, що для min-width встановлено значення 160px. Можете змінити його.
Порада. Якщо ви хочете, щоб ширина змісту, що розкривається, була такою ж ширини, як і кнопка, що розкривається, встановіть для width значення 100% (та overflow:auto для включення прокрутки на маленьких екранах).
Замість використання border ми використовували CSS властивість box-shadow, щоб меню, яке розкривається, виглядало як "картка".
Селектор :hover використовується для відображення випадаючого меню, коли користувач наводить вказівник миші на кнопку, що розкривається.
Випадаюче меню
Створіть випадаюче меню, яке дозволяє користувачу обрати опцію зі списку:
Цей приклад схожий на попередній, за виключенням того, що ми додаємо посилання в списку, що розкривається, та стилізуємо їх під стилізовану кнопку списку, що розкривається:
Приклад
<style>
/* Стилізація випадаючої кнопки */
.dropbtn {
background-color: #4CAF50;
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: 0 8px 16px 0 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: #f1f1f1}
/* Показати випадаюче меню при наведенні */
.dropdown:hover .dropdown-content {
display: block;
}
/* Змінити колір фону кнопки випадаючого списку, коли відображається зміст випадаючого списку. */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</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>
Спробуйте самі »
Вирівняний по правому краю випадаючий контент
Якщо ви хочете, щоб випадаюче меню перемістилось справа наліво, а не зліва направо, додайте right: 0;
Більше прикладів
Випадаюче зображення
Як додати зображення та інший контент всередині випадаючого списку.
Наведіть курсор на зображення:
