Как сделать гамбургер (бургер) меню: готовый код и подробное объяснение

Введение

В современном мире создание пользовательского интерфейса стало одной из ключевых задач при разработке веб-сайтов. Одним из наиболее популярных элементов навигации является гамбургер меню или бургер меню. Это компактное и удобное решение, позволяющее скрыть основное меню сайта и отобразить его по запросу пользователя. В этой статье мы рассмотрим, как создать гамбургер меню с использованием готового кода и предоставим подробное объяснение каждого шага.

Шаг 1: HTML-разметка

Для начала необходимо создать HTML-разметку для гамбургер меню. Вот пример простой разметки:

div class="hamburger-menu">
  <input id="menu-toggle" type="checkbox">
  <label for="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</div>

Здесь мы используем элементы <div>, <input>, <label>, <span> и <ul>. <div> является контейнером для всего меню, <input> представляет собой флажок для переключения состояния меню, а <label> используется для создания стилезованной кнопки гамбургера. <ul> и <li> используются для создания списка пунктов меню.

Шаг 2: CSS-стилизация

Теперь приступим к стилизации гамбургер меню с помощью CSS. Вот пример CSS-кода для нашего меню:

.hamburger-menu {
  position: relative;
  width: 30px;
  height: 25px;
}

.hamburger-menu label {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.hamburger-menu span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  border-radius: 2px;
  transition: transform 0.3s ease-in-out;
}

.hamburger-menu span:nth-child(1) {
  top: 0;
}

.hamburger-menu span:nth-child(2), .hamburger-menu span:nth-child(3) {
  top: 9px;
}

.hamburger-menu span:nth-child(4) {
  bottom: 0;
}

.hamburger-menu input {
  display: none;
}

.hamburger-menu input:checked ~ span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu input:checked ~ span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu input:checked ~ span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.hamburger-menu input:checked ~ .menu {
  display: block;
}

.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu li {
  margin-bottom: 10px;
}

.menu li:last-child {
  margin-bottom: 0;
}

В этом CSS-коде мы задаем различные стили для каждого элемента меню. Мы используем позиционирование, размеры, цвета и переходы, чтобы создать желаемый внешний вид для гамбургер меню.

Шаг 3: JavaScript для интерактивности

Наше гамбургер меню теперь имеет стиль, но оно пока не выполняет свою основную функцию – скрытие и отображение основного меню по запросу пользователя. Для этого мы добавим немного JavaScript-кода:

const menuToggle = document.querySelector('#menu-toggle');
const menu = document.querySelector('.menu');

menuToggle.addEventListener('change', function() {
  if (this.checked) {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
});

Здесь мы используем JavaScript, чтобы получить ссылку на переключатель меню и элемент меню. Затем мы добавляем прослушиватель событий для изменения состояния переключателя и, в зависимости от его значения, изменяем свойство display элемента меню, чтобы скрыть или отобразить его.

Заключение

Гамбургер меню – это удобный способ сделать навигацию на вашем веб-сайте компактной и легкодоступной для пользователей. В этой статье мы рассмотрели процесс создания гамбургер меню с помощью готового кода, а также предоставили подробное объяснение каждого шага. Вы можете использовать этот код в своих проектах или настроить его под свои потребности. Надеюсь, эта информация была полезной для вас и поможет вам создать отличное гамбургер меню для вашего веб-сайта.