CSS Burger Menu

CSS burger menu - это способ создания адаптивного меню с использованием CSS, который подразумевает применение анимаций и трансформаций для создания иконки бургера, которая превращается в полноценное меню при клике.

Пример кода для создания CSS burger menu:

HTML:

html

  
  
    

  
  

CSS:

css
/* Стили для меню */
.menu {
  display: none;
}
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu ul li {
  padding: 10px;
}
.menu ul li a {
  text-decoration: none;
  color: #000;
}
/* Стили для бургер иконки */
.burger {
  width: 25px;
  height: 3px;
  background-color: #000;
  margin: 5px 0;
  transition: 0.4s;
}
/* Анимация для бургер иконки */
#toggle-menu:checked + .burger-menu .burger {
  transform: rotate(45deg);
  background-color: transparent;
}
#toggle-menu:checked + .burger-menu .burger:before {
  top: 0;
  transform: rotate(0);
}
#toggle-menu:checked + .burger-menu .burger:after {
  top: 0;
  transform: rotate(90deg);
}
/* Показывать/скрывать меню по клику на бургер */
#toggle-menu:checked ~ .menu {
  display: block;
}

В этом примере мы создали адаптивное меню, которое будет скрываться на маленьких экранах и показываться при клике на иконку бургера. По умолчанию меню скрыто с помощью CSS свойства `display: none;`. С помощью анимации трансформаций мы создаем иконку бургера, которая превращается в крестик при клике.

С помощью CSS псевдоклассов и смежного селектора мы применяем стили и анимацию к иконке бургера и меню при изменении состояния переключателя `#toggle-menu:checked`.

Такой подход позволяет создавать стильные адаптивные меню без использования JavaScript.