CSS Горизонтальна панель навігації
Горизонтальний навбар
Є два способи створити горизонтальну панель навігації. Це використання елементів вбудованого або плаваючого списку.
Вбудовані елементи списку
Один зі способів створення горизонтальної панелі навігації - визначити елементи <li> як вбудовані в додаток до "стандартного" коду з попередньої сторінки:
Пояснення прикладу:
display: inline;- за замовчуванням елементи<li>є блочними елементами. Тут видаляються розриви рядків до і після кожного елемента списку, щоб відображати їх в одному рядку.
Елементи плаваючого списку
Ще один спосіб створення горизонтальної панелі навігації - це плаваючи елементи <li> та визначення стилю для посилань навігації:
Приклад
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #ddd;
}
Спробуйте самі »
Пояснення прикладу:
float: left;- використовуйте float, щоб елементи блоку розташувались поруч один біля одногоdisplay: block;- дозволяє визначити відступи (висоту, ширину, поля і т.д., якщо необхідно)padding: 8px;- оскільки блочні елементи займають всю доступну ширину, вони не можуть плавати поруч один біля одного. Тому необхідно визначити відступу, щоб вони добре вигляділиbackground-color: #ddd;- додайте сірий колір фону до кожного елементу
Порада: Додайте колір фону до <ul> замість кожного <a> елемента, якщо вам потрібен колір фону на всю ширину:
Приклади горизонтального навбара
Створіть базову горизонтальну панель навігації з темним кольором фону та змініть колір фону посилань, коли користувач наводить на них вказівник миші:
Приклад
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Змінити колір посилання на #111 (чорний) при наведенні курсора */
li a:hover {
background-color: #111;
}
Спробуйте самі »
Активне/Поточне навігаційне посилання
Додайте до поточного посилання "active" клас, щоб користувач знав, на якій сторінці він знаходиться:
Посилання по правому краю
Вирівняти посилання по правому краю, переміщуючи елементи списку праворуч (float:right;):
Приклад
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#news">Новини</a></li>
<li><a href="#contact">Контакти</a></li>
<li style="float:right"><a class="active" href="#about">Про нас</a></li>
</ul>
Спробуйте самі »
Роздільник меж посилань
Додайте властивість border-right до <li>, щоб створити роздільники посилань:
Приклад
/* Додати сіру праву межу до всіх елементів списку, крім останнього елемента (last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Спробуйте самі »
Фіксований навбар
Зробіть так, щоб панель навігації залишалася зверху або знизу сторінки, навіть коли користувач прокручує сторінку:
Примітка: Фіксоване положення може некоректно працювати на мобільних пристроях.
Сірий горизонтальний навбар
Приклад сірої горизонтальної панелі навігації з тонкою сірою межею:
Приклад
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
Спробуйте самі »
Липкий навбар
Додайте position: sticky; до <ul> щоб створити липку панель навігації.
Прикріплений (липкий) елемент переключається між відносним та фіксованим, в залежності від положення прокрутки. Він позиціонується відносно, поки не буде досягнута задана позиція зміщення в області перегляду - потім він "залипає" на місці (як при position: fixed).
Примітка: Internet Explorer не підтримує sticky позиціонування. Safari потребує префікс -webkit- (дивіться приклад вище). Необхідно вказати хоча б одне з наступних значень top, right, bottom або left щоб працювало sticky позиціонування.
Більше прикладів
Адаптивна верхня навігація
Як використовувати медіазапити CSS для створення адаптивної верхньої навігації.
Адаптивна бокова навігація
Як використовувати медіазапити CSS для створення адаптивної бокової навігації.
Панель навігації, що випадає (розкривається)
Як додати в панель навігації меню, що випадає (розкривається).
