W3.CSS Спадні списки
W3.CSS Класи спадних списків
W3.CSS надає наступні класи спадного списку:
| Клас | Визначає |
|---|---|
| w3-dropdown-hover | Елемент спадного списку, на який можна навести вказівник |
| w3-dropdown-content | Спадне меню, яке буде показано |
| w3-dropdown-click | Елемент спадного списку, який можна натиснути |
Елементи спадного меню
Клас 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">Click Me!</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>
Спадні картки
Наведіть курсор миші на одне з наведених нижче міст:
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tokyo is the capital city of Japan.
13 million inhabitants.
Приклад
<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>London is the capital city of England.</p>
<p>It is the most populous city in the UK.</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>
