1

Я делаю алгоритм для отображения бургер-меню, для этого использую следующий js код:

    const iconMenu = document.querySelector(".icon-menu");
if(iconMenu){
    const menu = document.querySelector(".menu");
    iconMenu.addEventListener("click", function(e) {
        document.body.classList.toggle("_lock");
        iconMenu.classList.toggle("_active");
        menu.classList.toggle("_active");
    });
}

однако, в инспекторе класс не добавляется. В чём может быть проблема и в чём я не прав?

css:

.menu{
        position: fixed;
        top: 0;
        left: -100%;
        width:  100%;
        height: 100%;   
        background-color: #478B46;
        padding: 130px 15px 30px 15px;
        transition: left 0.5s ease 0s;
        overflow: auto;
    }
    .menu._active{
        left: 0;
    }

.icon-menu{
        position: relative;
        z-index: 5;
        flex: 0 0 30px;
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between; 
        float: left;
        cursor: pointer;
    }

html:

<div class="header__menu__container">
                    <div class="header-menu">
                        <div class="menu-icon-cont">
                            <a href="" class="icon-menu"><span></span></a>
                        </div>
                        <nav id="menu"class="menu">
                            <ui class="menu__list">
                                <li class="menu__item"><a href="" class="menu__link">1</a></li>
                                <li class="menu__item"><a href="" class="menu__link">2</a></li>
                                <li class="menu__item"><a href="" class="menu__link">3</a></li>
                                <li class="menu__item"><a href="" class="menu__link">4</a></li>
                                <li class="menu__item"><a href="" class="menu__link">5</a></li>
                            </ui>
                        </nav>
                        <div class="header__button">
                            <a href="" class="button button_appointment">6</a>      
                        </div>
                    </div>                  
                </div>      
2
  • что консоль показывает? добавьте html 19 июн 2022 в 9:34
  • @АлександрСычёв html добавил, в консоли ничего
    – Quribe
    19 июн 2022 в 9:40

2 ответа 2

1

Нужно добавить

 e.preventDefault();

т.к. при клике на ссылку она отправляет на тот же URL. Переадресует крч.


Или в href написать #


В целом, если не нужна работа с href, то и смысла в теге a нулевая. Может стилизовать обычный div под неё?

0

const iconMenu = document.querySelector(".icon-menu");
const menu = document.querySelector(".menu");


iconMenu.addEventListener("click", function (e) {
  e.preventDefault()
  menu.classList.toggle('_active');
});
.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #478B46;
  padding: 130px 15px 30px 15px;
  transition: left 0.5s ease 0s;
  overflow: auto;

}

.menu._active {
  left: 0;

}

.icon-menu {
  position: relative;
  z-index: 5;
  flex: 0 0 30px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;

}
<div class="header__menu__container">
    <div class="header-menu">
      <div class="menu-icon-cont">
        <a href="" class="icon-menu"><span></span></a>
      </div>
      <nav id="menu" class="menu">
        <ui class="menu__list">
          <li class="menu__item"><a href="" class="menu__link">1</a></li>
          <li class="menu__item"><a href="" class="menu__link">2</a></li>
          <li class="menu__item"><a href="" class="menu__link">3</a></li>
          <li class="menu__item"><a href="" class="menu__link">4</a></li>
          <li class="menu__item"><a href="" class="menu__link">5</a></li>
        </ui>
      </nav>
      <div class="header__button">
        <a href="" class="button button_appointment">6</a>
      </div>
    </div>
  </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.