BenderIsGreat34
@BenderIsGreat34
junior front-end

Можно ли сделать адаптивное меню без манипуляции стилями в js?

Сделал простой обработчик для меню, но потом мне сказали, что лучше не манипулировать стилями. Возможно ли сделать адаптивное меню без изменения css в js?
document.addEventListener("DOMContentLoaded", function() {
      var openMenu = document.querySelector(".header__menu-btn.btn--burger");
      var links = document.querySelector(".header__menu-list");
      var bgAdaptiveMenu = document.querySelector('.header__menu_background');

      openMenu.addEventListener("click", () => {
        links.classList.remove('header__menu-list');
        links.classList.add('header__menu-adaptive_active');
        bgAdaptiveMenu.style.display = 'block';
      });
      bgAdaptiveMenu.addEventListener('click', function(event) {
        if (event.target == bgAdaptiveMenu) {
          links.classList.add('header__menu-list');
          links.classList.remove('header__menu-adaptive_active');
          bgAdaptiveMenu.style.display = 'none';
        }
      });
    });
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
l3ftoverz
@l3ftoverz Куратор тега JavaScript
Люблю Финский металкор
links.classList.remove('header__menu-list');
links.classList.add('header__menu-adaptive_active');


Есть Element.classList.toggle()

bgAdaptiveMenu.style.display = 'block';
Вынеси в отдельный класс, который будешь тоглить, тогда JS будет лишь управлять состоянием, а за стили отвечать CSS.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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