Почему не работает бургер меню?

Question

[Yaroslav723]

function burgerMenu(selector) {
     let menu = $(selector);
     let button = menu.find('.burger-menu_button');
     let links = menu.find('.burger-menu_link');
     let overlay = menu.find('.burger-menu_overlay');

     button.on('click', (e) => {
          e.preventDefault();
          toggleMenu();
     });

     links.on('click', () => toggleMenu());
     overlay.on('click', () => toggleMenu());

     function toggleMenu() {
          menu.toggleClass('.burger-menu_active');
          if (menu.hasClass('.burger-menu_active')) {
               $('body').css('overflow', 'hidden');
          } else {
               $('body').css('overflow', 'visible');
          }
     }
}

burgerMenu('.burger-menu');

<div class="burger-menu  ">
     <a href="#" class="burger-menu_button">
          <span class="burger-menu_lines"></span>
     </a>
     <ul class="burger-menu_nav">
          <li class="burger-menu_list">
               <a href="" class="burger-menu_link">Home</a>
          </li>
          <li class="burger-menu_list">
               <a href="" class="burger-menu_link">Our Products</a>
          </li>
          <li class="burger-menu_list">
               <a href="" class="burger-menu_link">Blog</a>
          </li>
          <li class="burger-menu_list">
               <a href="" class="burger-menu_link">About</a>
          </li>
          <li class="burger-menu_list">
               <a href="" class="burger-menu_link">Contact</a>
          </li>
          <li class="burger-menu_list">
               <a href="" class="burger-menu_link">Styleguide</a>
          </li>
     </ul>
     <div class="burger-menu_overlay"></div>
</div>

.burger-menu_button {
     position: fixed;
     top: 10px;
     right: 10px;
     z-index: 30;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background-color: #2a2a2a;
}
.burger-menu_button:hover .burger-menu_lines {
     filter: brightness(0.7);
}

.burger-menu_lines,
.burger-menu_lines::after,
.burger-menu_lines::before {
     position: absolute;
     width: 40px;
     height: 6px;
     background-color: #fff;
}

.burger-menu_lines {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
.burger-menu_lines::before {
     content: "";
     top: -12px;
}
.burger-menu_lines::after {
     content: "";
     top: 12px;
}

.burger-menu_active .burger-menu_lines {
     background-color: transparent;
}
.burger-menu_active .burger-menu_lines::before {
     top: 0;
     transform: rotate(45deg);
}
.burger-menu_active .burger-menu_lines::after {
     top: 0;
     transform: rotate(-45deg);
}

.burger-menu_nav {
     padding-top: 20px;
     margin-top: -62px;
     position: fixed;
     z-index: 20;
     display: flex;
     flex-flow: column;
     height: 100%;
     background-color: #2a2a2a;
     overflow-y: auto;
     left: -100%;
}
.burger-menu_active .burger-menu_nav {
     left: 0;
}

.burger-menu_list {
     margin-bottom: 40px;
}

.burger-menu_link {
     padding: 10px;
     font-size: 25px;
     text-transform: uppercase;
     letter-spacing: 5px;
     color: #fff;
}
.burger-menu_link:hover {
     text-decoration: underline;
     filter: brightness(0.7);
}

.burger-menu_overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 10;
}
.burger-menu_active .burger-menu_overlay {
     display: block;
}

Comments

[Mizutsune]

Yaroslav723, отредактируйте свой вопрос и оформите код в теги.

[Yaroslav723]

Frightful Behemoth, готово

[ambisinister One]

Yaroslav723, 3.5 кб на простой пирожок?
Тогда предлагаю ещё на питоне что-нить добавить)
Вы извращаетесь?
А другие, вместо того, чтобы отредактировать и убрать всё лишнее, советуют убрать только точку...
Эксперт на эксперде...
Что-то Паниковсого не видно) Он бы посоветовал!
lol

[Mizutsune]

ambisinister One, если человеку хочется использовать JQ, то пусть использует. Со временем может придёт осознание что писать многие вещи лучше, выгоднее и проще без всяких зависимостей, в стиле JQ. В своё время, я часто рекомендовал людям отказаться от этой либы, но уже лень.

[ambisinister One]

Frightful Behemoth, Почему бы сразу так не посоветовать?
Мне не жалко знаниями делиться с другими)
Чтобы это осознание пришло сразу.

[Mizutsune]

ambisinister One, многие люди всё равно продолжают совершать различные ошибки, не принимая советов других людей.

[Mizutsune]

ambisinister One, да, вы правы. Обновил ответ.

Answer 1

[Mizutsune]

Не работает потому что у вас ошибка в строчках:

menu.toggleClass('.burger-menu_active');
menu.hasClass('.burger-menu_active')

Нужно просто убрать точки перед именами классов в этих методах:

menu.toggleClass() & menu.hasClass()

Полезная информация по этим методам: JQuery - toggleClass и JQuery - hasClass и совет на будущее: Если используете ту или иную библиотеку, читайте внимательнее документацию. Это намного упрощает жизнь.

Однако уже пора отказаться от JQuery, так как эта библиотека устарела и нет смысла тянуть лишнию зависимость.

Переписать исходную функцию на нативный JS, можно например так:

function burgerMenu(selector) {
  const menuElement = document.querySelector(selector);

  const elements = [
    "burger-menu_link",
    "burger-menu_button",
    "burger-menu_overlay",
  ];

  const isTriggerElement = (element) => {
    return [...element.classList].some((className) =>
      elements.includes(className)
    );
  };

  menuElement.addEventListener("click", ({ target }) => {
    if (isTriggerElement(target)) {
      toggleMenu();
    }
  });

  function toggleMenu() {
    menuElement.classList.toggle("burger-menu_active");
    menuElement.classList.contains("burger-menu_active")
      ? document.body.classList.add("no-scroll")
      : document.body.classList.remove("no-scroll");
  }
}

burgerMenu(".burger-menu");

И немного дополнить стили.

Добавить правило pointer-events: none для элемента .burger-menu_lines

.burger-menu_lines {
   pointer-events: none;
}

И добавить новый класс:

.no-scroll {
   overflow: hidden;
}

Намного проще написать подобный функционал на чистом JS и не стоит тащить в проект зависимость в виде Jquery. Лучшие времена этой библиотеки уже давно прошли.

Comments

[Yaroslav723]

спасибо