Меню

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

Чтобы создать гамбургер (бургер) меню на CSS, вы можете использовать триггер-иконку в виде трех горизонтальных полосок, которая будет превращаться в крестик при нажатии для открытия и закрытия меню. Вот пример кода CSS для гамбургер меню:

HTML:

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

CSS:

.navbar {
  position: relative;
  background-color: #333;
  color: #fff;
  padding: 20px;
}

.navbar-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
}

.navbar-icon::before,
.navbar-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
  transition: transform 0.3s;
}

.navbar-icon::before {
  top: -8px;
}

.navbar-icon::after {
  top: 8px;
}

#navbar-toggle:checked + .navbar-icon::before {
  transform: rotate(45deg) translate(5px, 5px);
}

#navbar-toggle:checked + .navbar-icon::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

.navbar-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background-color: #333;
  list-style: none;
  padding: 0;
  margin-top: 10px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s;
}

#navbar-toggle:checked + .navbar-icon + .navbar-menu {
  transform: scaleY(1);
}

.navbar-menu li {
  padding: 10px;
}

.navbar-menu li a {
  color: #fff;
  text-decoration: none;
}

В этом примере гамбургер меню представлено внутри контейнера с классом «navbar». Используется тег <input> с типом «checkbox» для создания переключателя меню. Тег <label> с классом «navbar-icon» используется в качестве триггера-иконки для переключения меню.

С помощью CSS свойства ::before и ::after создаются три горизонтальные полоски в виде иконки. При нажатии на триггер-иконку, с помощью селектора :checked и свойства transform происходит анимация, превращающая три полоски в крестик.

Меню представлено в виде неупорядоченного списка <ul> с классом «navbar-menu». При переключении меню, используя селектор :checked, меню появляется или скрывается с помощью свойства transform.

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

Меню