Как сделать бургер меню html css

Узнайте как быстро создать бургер-меню с помощью HTML и CSS с примером и инструкциями по установке.

Создание бургер меню с помощью HTML и CSS

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

Для создания бургер меню нам понадобится HTML и CSS. В первую очередь нам нужно создать HTML-структуру для меню. Это можно сделать с помощью нескольких элементов div:

<div class="menu">
  <div class="burger-menu">
    <div class="burger-line"></div>
    <div class="burger-line"></div>
    <div class="burger-line"></div>
  </div>
  <ul class="menu-list">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Этот код создает меню с иконкой бургера и списком пунктов меню. Теперь нам нужно добавить стили CSS, чтобы оно выглядело достойно. Начнем с иконки бургера. Для этого мы зададим ширину, высоту и цвет для каждой линии:

.burger-line {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}

Затем добавим анимацию, которая изменяет цвет и форму линии при наведении мыши:

.burger-line:hover {
  background-color: #fff;
  transform: rotate(90deg);
}

Теперь нам нужно добавить анимацию для списка меню. Для этого мы скроем список по умолчанию и добавим анимацию для его появления при наведении мыши:

.menu-list {
  display: none;
  position: absolute;
  background-color: #fff;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu-list.active {
  display: block;
  animation: appear 0.4s ease-in-out;
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Для завершения нам нужно написать немного JavaScript-кода, чтобы переключать класс «active» для списка меню при нажатии на иконку бургера:

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

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

Это все. Теперь мы можем создать адаптивное бургер меню с помощью HTML и CSS. Этот код можно легко модифицировать, чтобы подогнать его под ваш проект.