W3.CSS Панелі / Бари
Горизонтальні панелі
Горизонтальні панелі є поширеними елементами вебдизайну:
Клас w3-bar використовується для стилізації горизонтальної панелі:
Приклад
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Kyiv</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Метою класу w3-bar-item є надання правильного інтервалу, відступу та позиціонування.
Вертикальні панелі
Вертикальні панелі (бічні панелі) також поширені у вебдизайні:
Клас w3-bar-block використовується для стилізації вертикальної смуги:
Приклад
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Kyiv</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Кольори панелі
Для стилізації панелі можна використовувати будь-який колір:
Приклад
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Kyiv</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Кольори при наведенні курсора
Для стилізації панелі можна використовувати будь-який колір наведення курсора:
Наведіть курсор на елементи панелі, щоб побачити ефект:
Приклад
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Kyiv</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
Панелі посилань
Забезпечення навігації є типовим використанням панелей:
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Kyiv</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
Кнопки панелі
Клас w3-button ідеально підходить для оформлення посилань в панелі.
Наведіть курсор на елементи панелі, щоб побачити ефект:
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Kyiv</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
Адаптивна панель
Клас w3-mobile ідеально підходить для адаптації елементів панелі.
Змініть розмір вікна, щоб побачити ефект:
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Kyiv</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
Елементи панелі, вирівняні за правим краєм
Клас w3-right ідеально підходить для вирівнювання елементів панелі за правим краєм:
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Kyiv</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>
