НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності

CSS Продвинутий

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Підгонка об'єкту CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Горизонтальна панель навігації


Горизонтальний навбар

Є два способи створити горизонтальну панель навігації. Це використання елементів вбудованого або плаваючого списку.

Вбудовані елементи списку

Один зі способів створення горизонтальної панелі навігації - визначити елементи <li> як вбудовані в додаток до "стандартного" коду з попередньої сторінки:

Приклад

li {
  display: inline;
}
Спробуйте самі »

Пояснення прикладу:

  • 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 {
  background-color: #ddd;
}
Спробуйте самі »

Приклади горизонтального навбара

Створіть базову горизонтальну панель навігації з темним кольором фону та змініть колір фону посилань, коли користувач наводить на них вказівник миші:

Приклад

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" клас, щоб користувач знав, на якій сторінці він знаходиться:

Приклад

.active {
  background-color: #4CAF50;
}
Спробуйте самі »

Посилання по правому краю

Вирівняти посилання по правому краю, переміщуючи елементи списку праворуч (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 {
  position: fixed;
  top: 0;
  width: 100%;
}
Спробуйте самі »

Зафіксувати внизу

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}
Спробуйте самі »

Примітка: Фіксоване положення може некоректно працювати на мобільних пристроях.

Сірий горизонтальний навбар

Приклад сірої горизонтальної панелі навігації з тонкою сірою межею:

Приклад

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}
Спробуйте самі »

Липкий навбар

Додайте position: sticky; до <ul> щоб створити липку панель навігації.

Прикріплений (липкий) елемент переключається між відносним та фіксованим, в залежності від положення прокрутки. Він позиціонується відносно, поки не буде досягнута задана позиція зміщення в області перегляду - потім він "залипає" на місці (як при position: fixed).

Приклад

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
Спробуйте самі »

Примітка: Internet Explorer не підтримує sticky позиціонування. Safari потребує префікс -webkit- (дивіться приклад вище). Необхідно вказати хоча б одне з наступних значень top, right, bottom або left щоб працювало sticky позиціонування.


Більше прикладів

Адаптивна верхня навігація

Як використовувати медіазапити CSS для створення адаптивної верхньої навігації.

Адаптивна верхня навігація
Спробуйте самі »

Адаптивна бокова навігація

Як використовувати медіазапити CSS для створення адаптивної бокової навігації.

Адаптивна бокова навігація
Спробуйте самі »

Панель навігації, що випадає (розкривається)

Як додати в панель навігації меню, що випадає (розкривається).

Спробуйте самі »