W3.CSS Dropdown / Выпадающие / Раскрывающиеся элементы
W3.CSS Классы Dropdown
W3.CSS предоставляет следующие выпадающие (раскрывающиеся) (dropdown) классы:
| Класс | Определяет |
|---|---|
| w3-dropdown-hover | Выпадающий элемент при наведении |
| w3-dropdown-content | Выпадающая (раскрывающаяся) часть для отображения |
| w3-dropdown-click | Кликабельный выпадающий элемент |
Выпадающие (dropdown) элементы
Класс w3-dropdown-hover определяет доступный выпадающий элемент (при наведении).
Класс w3-dropdown-content определяет раскрывающийся контент для отображения.
Пример
<div class="w3-dropdown-hover">
<button class="w3-button">Наведите на меня!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Ссылка 1</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 2</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 3</a>
</div>
</div>
Элементом наведения и выпадающим элементом содержимого может быть любой элемент HTML.
В приведенном выше примере элементом наведения был <button> (кнопка), а выпадающий контент <div>.
В следующем примере элемент наведения - это <p>, а выпадающий контент <span>:
Пример
<p class="w3-dropdown-hover">Наведите на меня!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>
Выпадающее (раскрывающееся) меню
Класс w3-dropdown-hover идеально подходит для создания панели навигации с выпадающими меню:
Пример
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Главная</a>
<a href="#" class="w3-bar-item w3-button">Ссылка
1</a>
<div class="w3-dropdown-hover">
<button
class="w3-button">Выпадающее меню</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Ссылка 1</a>
<a href="#"
class="w3-bar-item w3-button">Ссылка
2</a>
<a href="#" class="w3-bar-item
w3-button">Ссылка 3</a>
</div>
</div>
</div>
Попробуйте сами »
Примечание: Вы узнаете больше об Панелях навигации позже в этом учебнике.
Кликабельные выпадающие элементы
Класс w3-dropdown-click создает кликабельный выпадающий элемент.
С этим классом выпадающий (раскрывающийся) список открывается с помощью JavaScript:
Пример
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Нажми меня!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Ссылка 1</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 2</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 3</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Выпадающие изображения
Наведите курсор на изображение:
Пример
<div class="w3-dropdown-hover">
<img src="img_snowtops.jpg" alt="Norway" style="width:20%">
<div
class="w3-dropdown-content" style="width:300px">
<img src="img_snowtops.jpg"
alt="Norway" style="width:100%">
</div>
</div>
Выпадающие карточки
Наведите курсор на один из городов ниже:
Лондон - столица Англии.
Это самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.
Токио - столица Японии.
13 миллионов жителей.
Пример
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content
w3-card-4" style="width:250px">
<img src="img_london.jpg"
alt="London" style="width:100%">
<div
class="w3-container">
<p>Лондон - столица Англии.</p>
<p>Это самый густонаселенный город в Великобритании.</p>
</div>
</div>
</div>
Анимированный выпадающий элемент
Используйте любой из w3-animate-классов для увеличения, уменьшения или скольжения в выпадающем содержимом:
Пример
<div class="w3-dropdown-click">
<button onclick="myFunction()"
class="w3-button">Нажми меня</button>
<div id="Demo"
class="w3-dropdown-content w3-bar-block w3-animate-zoom">
<a href="#" class="w3-bar-item w3-button">Ссылка
1</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 2</a>
<a href="#"
class="w3-bar-item w3-button">Ссылка 3</a>
</div>
</div>
Выровненный по правому краю выпадающий элемент
Используйте класс w3-right чтобы переместить выпадающий список вправо. Используйте CSS для позиционирования выпадающего содержимого (right:0 сделает выпадающее меню справа налево, а не слева направо):
Пример
<div class="w3-dropdown-hover w3-right">
<button class="w3-button">Выпадающий список</button>
<div class="w3-dropdown-content w3-bar-block w3-border" style="right:0">
<a href="#" class="w3-bar-item w3-button">Ссылка 1</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 2</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 3</a>
</div>
</div>
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
