Бургер меню CSS: быстрое и простое создание

Бургер меню – это способ показа навигационного меню на мобильных устройствах. Обычно оно скрыто, а при нажатии на иконку бургер меню появляется. Реализовать бургер меню в CSS можно несколькими способами.

Первый способ – использование чистого CSS. Для этого нужно создать такую структуру HTML:

В этой структуре есть три элемента: логотип, меню и бургер меню. Каждый элемент имеет свой класс. Далее, нужно добавить стили для бургер меню:

.navbar__burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 16px;
  cursor: pointer;
}
.navbar__burger span {
  display: block;
  width: 20px;
  height: 3px;
  background-color: #000;
}
.navbar__burger span:first-child {
  transform: translateY(-5px);
}
.navbar__burger span:last-child {
  transform: translateY(7px);
}

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

Далее, нужно задать стили для меню:

.navbar__menu {
  display: none;
}
.navbar__menu.show {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.navbar__menu li {
  margin-bottom: 20px;
  text-align: center;
}
.navbar__menu li:last-child {
  margin-bottom: 0;
}

Здесь мы задаем, что меню изначально скрыто при помощи display: none;. Его отображение будет изменяться при нажатии на иконку бургер меню. Кроме того, мы задаем расположение меню – оно должно находиться под бургер меню и иметь абсолютную позицию. Наконец, задаем основные стили для пунктов меню.

Чтобы добавить возможность показа и скрытия меню в CSS, нужно использовать псевдокласс :checked и дополнительный элемент input в структуре HTML.

.navbar__checkbox-label {
  display: none;
}
#navbar__checkbox:checked ~ .navbar__menu {
  display: block;
}
#navbar__checkbox:checked ~ .navbar__burger span:first-child {
  transform: rotate(45deg);
  top: 10px;
}
#navbar__checkbox:checked ~ .navbar__burger span:nth-child(2) {
  opacity: 0;
}
#navbar__checkbox:checked ~ .navbar__burger span:last-child {
  transform: rotate(-45deg);
  bottom: 10px;
}

В этом примере мы создаем дополнительный элемент input и стилизуем его. Затем мы используем псевдокласс :checked для изменения свойства display у меню и других элементов при нажатии на бургер меню. Иконка превращается в крестик, а меню отображается.

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