Для создания кнопки бургер-меню рассмотрим пример, в котором создадим и будем использовать функцию, для переключения состояния, т.е., функция будет добавлять и удалять классы для элементов бургера при клике на него.
class="burger"> class="burger__line">/* CSS */ .burger display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 20px; cursor: pointer; > .burger__line width: 100%; height: 3px; background-color: black; > // JavaScript const burger = document.querySelector('.burger'); const lines = document.querySelectorAll('.burger__line'); function toggleBurger() lines.forEach((line) => line.classList.toggle('active')); > burger.addEventListener('click', toggleBurger); В данном примере мы создали элемент бургера с тремя линиями, которые будут выглядеть как бургер. Затем мы написали функцию toggleBurger , которая будет переключать класс active для каждой линии бургера при клике на него. Для этого мы использовали метод forEach для перебора всех линий и метод classList.toggle .
Наконец, мы добавили обработчик события click на элемент бургера, который вызывает функцию toggleBurger при клике на него.
Элементы бургера для состояния active можно настроить в зависимости от требований и дизайна конкретного проекта.
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Связаться с нами
Задать вопрос
Купить шаблон
Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)
Заказать установку примера
Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Связаться с нами
Задать вопрос
Купить шаблон
Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)
Заказать установку примера
Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.