Для правильной реализации гамбургера в JavaScript, можно использовать различные подходы в зависимости от требований и предпочтений разработчика. В данном ответе я предлагаю один из возможных вариантов реализации.
Первым шагом будет создание HTML-разметки для гамбургера. В простейшем случае, гамбургер может состоять из трех горизонтальных линий, которые будут представлять верхнюю, среднюю и нижнюю части булочки. Например:
<div class="hamburger"> <span></span> <span></span> <span></span> </div>
Далее, нужно прописать стили для гамбургера с помощью CSS. Например:
.hamburger { width: 30px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } .hamburger span { width: 100%; height: 3px; background-color: #000; }
Теперь, создадим функцию в JavaScript, которая будет отвечать за изменение вида гамбургера при клике на него. В данной реализации, при клике на гамбургер будут добавляться или удаляться классы, которые изменят его вид.
const hamburger = document.querySelector('.hamburger'); hamburger.addEventListener('click', function() { // Добавляем или удаляем класс active для гамбургера hamburger.classList.toggle('active'); });
Теперь, добавим стили для класса active, который изменит вид гамбургера при клике:
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translateX(6px) translateY(8px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translateX(6px) translateY(-8px); }
В данной реализации, при клике на гамбургер, верхняя и нижняя линии поворачиваются на 45 градусов и перемещаются вверх и вниз соответственно. Средняя линия исчезает при клике.