Бургер меню CSS: Всі секрети створення сучасного меню для вашого сайту

Сучасні веб-сайти вимагають інтуїтивно зрозумілої навігації, і одним з найбільш популярних рішень є бургер меню. Ця стаття розгляне, як створити бургер меню за допомогою CSS, його переваги, а також надасть корисні поради та приклади, щоб ви могли без зусиль реалізувати цей елемент у своєму проекті.

Що таке бургер меню?

Бургер меню — це елемент навігації, який зазвичай складається з трьох горизонтальних смуг, які нагадують бургер. Натискаючи на це меню, користувач може отримати доступ до навігаційних пунктів, які зазвичай приховані. Таке рішення стало популярним завдяки своїй компактності та елегантності — воно дозволяє зберігати простір на сторінці.

Чому варто використовувати бургер меню?

1. Естетика: Бургер меню виглядає сучасно та мінімалістично.

2. Економія місця: Ідеально підходить для мобільних пристроїв, де простір обмежений.

3. Зручність користування: Легкий доступ до навігації в один клік.

Основи створення бургер меню на CSS

Для початку, розглянемо, як створити просте бургер меню за допомогою HTML та CSS. У цьому прикладі ми використовуватимемо елементи списку (<ul> та <li>) для навігації.

HTML-структура

<div class="burger-menu">
  <div class="burger-icon">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <ul class="menu-list">
    <li>Головна</li>
    <li>Про нас</li>
    <li>Послуги</li>
    <li>Контакти</li>
  </ul>
</div>

CSS-стилі

.burger-menu {
  position: relative;
}

.burger-icon {
  cursor: pointer;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.line {
  height: 3px;
  background: black;
  transition: all 0.3s ease;
}

.menu-list {
  display: none;
  list-style: none;
  padding: 0;
}

.menu-list.active {
  display: block;
}

.menu-list li {
  margin: 10px 0;
}

Додавання інтерактивності з JavaScript

Щоб бургер меню стало функціональним, нам потрібно додати декілька рядків JavaScript для управління класами:

const burgerIcon = document.querySelector('.burger-icon');
const menuList = document.querySelector('.menu-list');

burgerIcon.addEventListener('click', () => {
  menuList.classList.toggle('active');
});

Переваги CSS-чекі

— Легкість в налаштуванні: CSS дозволяє легко змінювати стиль і анімацію бургер меню.

— Відсутність залежності від JavaScript: просте меню можна реалізувати лише на CSS, що зменшує навантаження на сайт.

Приклади анімації бургер меню

Анімація є важливим аспектом дизайну, і бургер меню не є винятком. Додамо анімацію до бургер-іконки, яка змінюється при активному стані:

CSS для анімації

.burger-icon.active .line:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: 10% center;
}

.burger-icon.active .line:nth-child(2) {
  opacity: 0;
}

.burger-icon.active .line:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: 10% center;
}

Адаптивність бургер меню

Для адаптації бургер меню під різні пристрої, потрібно внести декілька змін у CSS:

@media (min-width: 768px) {
  .burger-icon {
    display: none; /* Ховаємо бургер для великих екранів */
  }

  .menu-list {
    display: flex; /* Відображаємо меню як горизонтальний список */
  }
}

Поширені запитання

1. Чи можна використовувати бургер меню на десктопах?

Так, бургер меню можна використовувати на десктопах, але воно більше підходить для мобільних версій сайтів через економію простору.

2. Які є альтернативи бургер меню?

Альтернативами є традиційні горизонтальні меню, вертикальні бічні панелі або акордеони, які також можуть ефективно відображати навігацію.

3. Чи легко налаштувати бургер меню?

Так, бургер меню можна легко налаштувати за допомогою CSS і JavaScript.

4. Чи вплине бургер меню на SEO?

Бургер меню не має безпосереднього впливу на SEO, якщо воно правильно структуроване і доступне для пошукових систем. Важливо, щоб всі важливі посилання були видимі для користувачів.

5. Як зробити бургер меню доступним для людей з інвалідністю?

Важливо використовувати семантичні елементи, такі як aria-hidden, для позначення стану меню, а також переконатися, що воно доступне для навігації за допомогою клавіатури.

6. Які інструменти можна використовувати для тестування бургер меню?

Для тестування бургер меню можна використовувати інструменти, такі як Google Lighthouse, що допомагає оцінити доступність, а також перевіряє, чи все працює коректно на різних пристроях.

7. Чи можу я анімувати бургер меню?

Так, анімація бургер меню додає динаміки і покращує користувацький досвід. Ви можете анімувати бургер і його переходи при відкритті та закритті меню.

Підсумки

Створення бургер меню на CSS — це відмінний спосіб покращити навігацію на вашому сайті. Зрозуміле, адаптивне та естетичне меню може значно підвищити зручність використання ресурсу. Використовуючи вищенаведені поради, ви зможете без зусиль реалізувати бургер меню у своїх проектах, забезпечуючи актуальний дизайн і використовуючи всі переваги сучасних веб-технологій.