Как работает нажатие бургер меню на странице?

Бургер меню: полная реализация

Бургер меню (гамбургер меню) — это иконка с тремя горизонтальными линиями, которая появляется на мобильных устройствах. При нажатии показывается скрытое меню навигации.

Структура HTML

<header>
  <!-- Бургер иконка (видна только на мобильных) -->
  <button class="burger-menu" id="burgerBtn" aria-label="Открыть меню">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <!-- Навигационное меню -->
  <nav class="nav-menu" id="navMenu">
    <a href="/" class="nav-link">Главная</a>
    <a href="/about" class="nav-link">О нас</a>
    <a href="/services" class="nav-link">Услуги</a>
    <a href="/contact" class="nav-link">Контакты</a>
  </nav>
</header>

CSS стили

/* По умолчанию меню скрыто */
.nav-menu {
  position: fixed;
  top: 60px;  /* ниже хедера */
  left: -100%;  /* слева за пределами экрана */
  width: 100%;
  height: calc(100vh - 60px);
  background: white;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  transition: left 0.3s ease;  /* плавная анимация */
  z-index: 100;
}

/* Когда меню открыто */
.nav-menu.active {
  left: 0;  /* сдвигаем на экран */
}

/* Бургер иконка видна только на мобильных */
.burger-menu {
  display: none;  /* по умолчанию скрыта */
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.burger-menu span {
  width: 25px;
  height: 3px;
  background: black;
  transition: transform 0.3s ease;  /* анимация для X */
}

/* На мобильных показываем бургер */
@media (max-width: 768px) {
  .burger-menu {
    display: flex;
  }
}

/* Анимация превращения трёх линий в X */
.burger-menu.active span:first-child {
  transform: rotate(45deg) translateY(10px);
}

.burger-menu.active span:nth-child(2) {
  opacity: 0;  /* средняя линия исчезает */
}

.burger-menu.active span:last-child {
  transform: rotate(-45deg) translateY(-10px);
}

JavaScript логика

// Получаем элементы
const burgerBtn = document.getElementById('burgerBtn');
const navMenu = document.getElementById('navMenu');
const navLinks = document.querySelectorAll('.nav-link');

// Функция для открытия/закрытия меню
function toggleMenu() {
  // Переключаем класс на кнопке
  burgerBtn.classList.toggle('active');
  // Переключаем класс на меню
  navMenu.classList.toggle('active');
}

// Кликаем по бургер кнопке
burgerBtn.addEventListener('click', toggleMenu);

// Закрываем меню при клике на ссылку
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    burgerBtn.classList.remove('active');
    navMenu.classList.remove('active');
  });
});

// Закрываем меню при клике вне его
document.addEventListener('click', (e) => {
  if (!e.target.closest('header')) {
    burgerBtn.classList.remove('active');
    navMenu.classList.remove('active');
  }
});

React реализация

import { useState } from 'react';
import './Header.css';

function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  return (
    <header className="header">
      {/* Бургер кнопка */}
      <button
        className={`burger-menu ${isMenuOpen ? 'active' : ''}`}
        onClick={toggleMenu}
        aria-label="Открыть меню"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>

      {/* Навигационное меню */}
      <nav className={`nav-menu ${isMenuOpen ? 'active' : ''}`}>
        <a href="/" className="nav-link" onClick={closeMenu}>
          Главная
        </a>
        <a href="/about" className="nav-link" onClick={closeMenu}>
          О нас
        </a>
        <a href="/services" className="nav-link" onClick={closeMenu}>
          Услуги
        </a>
        <a href="/contact" className="nav-link" onClick={closeMenu}>
          Контакты
        </a>
      </nav>
    </header>
  );
}

export default Header;

Best practices

1. Accessibility (доступность)

<!-- Всегда добавляй aria-label для скринридеров -->
<button class="burger-menu" aria-label="Открыть меню" aria-expanded="false">
  <span></span>
  <span></span>
  <span></span>
</button>

2. Анимация в React

Для плавных переходов используй Framer Motion:

import { motion } from 'framer-motion';

function Header() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Меню</button>
      
      <motion.nav
        animate={isOpen ? { x: 0 } : { x: '-100%' }}
        transition={{ duration: 0.3 }}
      >
        {/* меню */}
      </motion.nav>
    </>
  );
}

3. Закрытие меню при нажатии Escape

useEffect(() => {
  function handleEscape(e) {
    if (e.key === 'Escape' && isMenuOpen) {
      setIsMenuOpen(false);
    }
  }

  document.addEventListener('keydown', handleEscape);
  return () => document.removeEventListener('keydown', handleEscape);
}, [isMenuOpen]);

4. Prevent body scroll когда меню открыто

useEffect(() => {
  if (isMenuOpen) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = 'auto';
  }
}, [isMenuOpen]);

Частые ошибки

// ПЛОХО: нет анимации
navMenu.style.display = isOpen ? 'block' : 'none';

// ХОРОШО: плавная анимация через CSS transitions
navMenu.classList.toggle('active');  // CSS переходит с left: -100% на left: 0

// ПЛОХО: забыл про мобильных
.burger-menu {
  display: flex;  /* будет видна на всех экранах!
}

// ХОРОШО: видна только на мобильных
@media (max-width: 768px) {
  .burger-menu {
    display: flex;
  }
}

Итог

Бургер меню работает по простому принципу:

1. HTML — кнопка и меню со ссылками
2. CSS — меню скрыто слева (left: -100%), плавная анимация при открытии
3. JS/React — при клике добавляем класс active, который сдвигает меню на экран
4. A11y — добавляем aria-label и aria-expanded для скринридеров
5. Мобильность — показываем бургер только на мобильных через @media