@Niki21212

Как сделать открытие меню по клику?

Есть меню и кнопка, у кнопки задана картинка в сss, картинка "бургер-меню". Как сделать чтобы при нажатии на кнопку открывалось меню и картинка менялась на крестик? На чистом js, а то везде примеры на jQuery.

<aside class="contener__aside">
        <nav class="aside__nav">
            <ul class="nav__menu-aside">
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside nav__menu__link-active">Ремонт техники</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Услуги и сервисы</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Корпоративным клиентам</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Продавцам техники</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Партнерам</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Производителям</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Наши сервисные центры</a></li>
                <li class="nav__menu__li-aside"> <a href="#" class="nav__menu__link-aside">Контакты</a></li>
            </ul>
        </nav>
    </aside>


<button class="header__button">
                </button>
  • Вопрос задан
  • 2025 просмотров
Пригласить эксперта
Ответы на вопрос 1
cannibal_corpse
@cannibal_corpse
Верстальщик руками
const button = document.querySelector('.header__button'); //ищем кнопку
const menu = document.querySelector('.aside__nav'); //ищем в DOM элемент с классом навигации, которая скрыта за бургером

// создаем функцию-хэндлер для смены класса
const onToggleMenuHandler = () => menu.classList.toggle('aside__nav--active'); // тут добавляешь класс к меню, который будет открывать это меню

button.addEventListener('click',  onToggleMenuHandler); //накидываем на кнопку обработчик событий по клику и передаем вторым аргументом нашу функцию.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы