W3.CSS Панелі навігації
Вертикальна:
Горизонтальна:
W3.CSS Класи панелі навігації
W3.CSS надає такі класи для панелей навігації:
| Клас | Визначає |
|---|---|
| w3-bar | Горизонтальний контейнер для елементів HTML |
| w3-bar-block | Вертикальний контейнер для елементів HTML |
| w3-bar-item | Контейнер бар елементи |
| w3-sidebar | Вертикальна бічна панель для елементів HTML |
| w3-mobile | Робить будь-який елемент панелі адаптованим до мобільних пристроїв |
| w3-dropdown-hover | Розкривний елемент, на який можна навести курсор |
| w3-dropdown-click | Елемент спадного списку, який можна натиснути (замість наведення курсора) |
Основна (базова) навігація
Клас w3-bar — це контейнер для горизонтального відображення елементів HTML.
Клас w3-bar-item визначає елементи контейнера.
Це ідеальний інструмент для створення панелей навігації:
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Головна</a>
<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>
Адаптивна навігація
Клас w3-mobile робить будь-які елементи панелі адаптивними (горизонтальні на великих екранах і вертикальні на малих).
Середні та великі екрани:
Маленькі екрани:
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Головна</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 3</a>
</div>
Кольорові панелі навігації
Використовуйте клас w3-color, щоб додати колір до панелі навігації:
Приклад
<div class="w3-bar w3-light-grey">
<div class="w3-bar w3-green">
<div class="w3-bar w3-blue">
Спробуйте самі »
Обрамлені панелі навігації
Використовуйте клас w3-border або w3-card, щоб додати межі навколо панелі навігації або відобразити її як картку:
Приклад
<div class="w3-bar w3-border w3-light-grey">
<div class="w3-bar w3-border w3-card-4">
Спробуйте самі »
Активні/Поточні посилання
Додайте клас w3-color до посилання, щоб виділити його:
Приклад
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Головна</a>
<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>
Посилання, які можна навести
Коли ви наводите курсор на кнопку, колір фону змінюється на сірий.
Якщо вам потрібен інший фоновий колір під час наведення курсора, скористайтеся будь-яким із класів w3-hover-color:
Приклад
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Головна</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Посилання 3</a>
</div>
Якщо замість цього ви хочете змінити колір тексту, вимкніть ефект наведення за замовчуванням за допомогою класу w3-hover-none і додайте клас w3-hover-text.
Приклад
<div class="w3-bar w3-border w3-black">
<a href="#" class="w3-bar-item w3-button">Default</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">Посилання 3</a>
</div>
Витратьте трохи часу, щоб пограти з різними ефектами наведення:
Приклад
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Посилання 3</a>
</div>
Посилання, вирівняні за правим краєм
Використовуйте клас w3-right для елемента списку, щоб вирівняти певне посилання за правим краєм:
Приклад
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Головна</a>
<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 w3-green w3-right">Посилання 3</a>
</div>
Розмір панелі навігації
Використовуйте клас w3-size, щоб змінити розмір шрифту посилань на панелі навігації:
Приклад
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Використовуйте клас w3-padding, щоб змінити відступ кожного посилання всередині панелі навігації:
Приклад
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Головна</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Посилання 3</a>
</div>
Примітка: Ви також можете додати відступ до панелі навігації замість кожної кнопки. Однак якщо ви це зробите, зауважте, що посилання не отримують повного відступу при наведенні курсора:
Налаштуйте ширину посилань за допомогою CSS властивості width
(Примітка: використовуйте w3-mobile, щоб перетворити посилання на 100% ширину на маленьких екранах):
Приклад
<div class="w3-bar w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Головна</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile" style="width:33%">Посилання 2</a>
</div>
Спробуйте самі »
Панель навігації з іконками (Font Awesome)
Приклад
<div class="w3-bar w3-light-grey w3-border">
<a href="#" class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
Спробуйте самі »
Класи "fa fa" у прикладі вище відображають іконки "Font Awesome".
Дізнайтеся більше про те, як відображати іконки в розділі W3.CSS Іконки на нашому сайті W3Schools українською.
Текст панелі навігації
Якщо вам потрібен текст замість кнопок у панелі навігації, скористайтеся класом w3-bar-item, щоб отримати такий самий відступ, як і кнопки.
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Головна</a>
<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>
<span class="w3-bar-item">Текст</span>
</div>
Спробуйте самі »
Навігаційна панель із вводами та кнопками
Приклад
<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>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
Спробуйте самі »
Панель навігації зі спадним меню
Наведіть курсор на посилання "Спадний список":
Приклад
<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, якщо ви віддаєте перевагу натисканню спадного посилання замість наведення курсора:
Приклад
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Спадний список <i class="fa fa-caret-down"></i>
</button>
<div id="demo"
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>
Спробуйте самі »
Горизонтальне спадне меню
Видаліть клас w3-bar-block із контейнера спадного списку, якщо ви хочете, щоб посилання спадного меню відображалися горизонтально, а не вертикально:
Приклад
<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-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-mobile для всіх посилань, включаючи спадний контейнер, щоб створити адаптивну панель навігації з адаптивними посиланнями спадного меню.
Змініть розмір вікна браузера, щоб побачити ефект:
Приклад
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-green">Головна</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 2</a>
<div class="w3-dropdown-hover w3-mobile">
<button class="w3-button">Спадний список <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Посилання 3</a>
</div>
</div>
</div>
Спробуйте самі »
Виправлена панель навігації
Щоб змусити навігаційну панель залишатися вгорі чи внизу сторінки, навіть коли користувач прокручує сторінку, оберніть <div> елемент навколо панелі та додайте клас w3-top або w3-bottom:
Вертикальна панель навігації
Клас w3-bar-block — це контейнер для вертикального відображення елементів HTML.
Приклад
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Головна</a>
<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>
Спробуйте самі »
Згортання панелі навігації
Якщо навігаційна панель займає надто багато місця на маленькому екрані, і ви не хочете відображати її вертикально за замовчуванням, ви можете сховати та показати класи для певних посилань на навігаційній панелі.
У наведеному нижче прикладі панель навігації замінено кнопкою (☰) у верхньому правому куті, коли вона відображається на планшетах і мобільних пристроях. Після натискання кнопки посилання на навігаційній панелі складатимуться вертикально:
Бічна навігація (сайдбар)
Клас w3-sidebar створює бічну навігацію:
