За счет чего можно открыть бургер меню?

Бургер-меню открывают через переключение состояния (класс/флаг) по клику: добавляют CSS-класс, меняющий видимость, или в React переключают состояние, управляющее рендером.

Способы реализации

CSS + JS (переключение класса)

burgerButton.addEventListener('click', () => {
  menu.classList.toggle('open');
});

.menu {
  transform: translateX(-100%); /* скрыто */
  transition: transform 0.3s;
}
.menu.open {
  transform: translateX(0); /* показано */
}

Только CSS (чекбокс-хак)

Скрытый чекбокс + :checked:

#menu-toggle:checked ~ .menu { transform: translateX(0); }

React (состояние)

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

<button onClick={() => setIsOpen(!isOpen)}>☰</button>
<nav className={isOpen ? 'menu open' : 'menu'}>...</nav>

Детали

• Анимация — через transform/opacity (плавно, на GPU).
• Доступность — aria-expanded, управление с клавиатуры, фокус-ловушка при открытии.
• Закрытие — по клику вне, Escape, выбору пункта.
• Оверлей — затемнение фона при открытом меню.

Коротко для собеседования

Бургер-меню открывают переключением состояния по клику: classList.toggle('open') + CSS-класс, меняющий transform/видимость (или в React — useState для рендера). Анимируют через transform. Важна доступность (aria-expanded, клавиатура, фокус) и закрытие по клику вне/Escape.