Створення меню в CSS

Практикуємо створення горизонтального меню сайту за допомогою Flexbox, стилізацію посилань, hover-ефектів та активного пункту меню.

Створення меню в CSS

Меню є одним із найпоширеніших елементів вебсайтів. За допомогою CSS можна створити горизонтальну навігацію зі стилізованими посиланнями.

Для розміщення пунктів меню в один ряд зручно використовувати Flexbox.

HTML-структура меню

Спочатку створимо контейнер menu та додамо в нього посилання.

<div id="menu">
  <a href="#">link text 1</a>
  <a href="#">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

Активний пункт меню

Поточну сторінку сайту зазвичай виділяють окремим класом active.

<div id="menu">
  <a href="#">link text 1</a>
  <a href="#" class="active">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

Розташування посилань у ряд

За допомогою display: flex контейнер перетворюється на Flex-контейнер, а посилання автоматично стають у ряд.

#menu {
  display: flex;
}

Стилізація пунктів меню

#menu a {
  margin-right: 5px;
  padding: 10px;
  font: 15px Arial;
  text-decoration: none;
  color: #1437AD;
  border: 1px solid #1437AD;
  background-color: white;
}

Посилання отримують відступи, рамку, колір тексту та білий фон.

Ефект при наведенні

За допомогою псевдокласу hover можна змінити вигляд пункту меню при наведенні курсора.

#menu a:hover {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}

Активний пункт і hover

Оскільки активний пункт має такий самий вигляд, як при наведенні, стилі можна об'єднати.

#menu a:hover,
#menu a.active {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}

Готове меню

<div id="menu">
  <a href="#">link text 1</a>
  <a href="#" class="active">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

#menu {
  display: flex;
}

#menu a {
  margin-right: 5px;
  padding: 10px;
  font: 15px Arial;
  text-decoration: none;
  color: #1437AD;
  border: 1px solid #1437AD;
  background-color: white;
}

#menu a:hover,
#menu a.active {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}

❗ Важливо:

Клас active зазвичай використовується для позначення сторінки, на якій зараз знаходиться користувач.

display: flex розташовує пункти меню в один ряд.
hover змінює стиль при наведенні курсора.
active показує поточний пункт меню.
Посилання можна стилізувати як кнопки.

📌 Завдання:

№1. Створіть меню з п'яти посилань.
№2. Розмістіть посилання горизонтально через Flexbox.
№3. Додайте hover-ефект.
№4. Виділіть активний пункт меню через клас active.

💡 Показати підказку

Для горизонтального меню використовуйте display: flex для контейнера та клас active для поточного пункту.

✅ Показати відповідь

#menu {
  display: flex;
}

#menu a:hover,
#menu a.active {
  color: blue;
}