0

На мобильных размерах создается бургер меню, при клике на него оно активируется и так же скрывается, но если хочу открыть еще раз ничего не выходит

Вот код HTML:

const HeaderMenuBtn = document.getElementById('HeaderMenu');
const main = document.querySelector('.header__list-mobile');


HeaderMenuBtn.addEventListener('click', function(){
    main.classList.add('active');            
    
    HeaderMenuBtn.addEventListener('click', removeClass);
})


function removeClass(){
    main.classList.remove('active');
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Bold.ttf) format(truetype);
}

*,*::before,*::after{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    font-family: Montserrat, sans-serif;
    background: rgba(20, 28, 36, 1);
}

html,body {
  height: 100%;
}

.container {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding:  0 10px;
}

.header__body {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: brown;
}

.header__wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}

.header__list {
  display: flex;
}

.header__item:not(:last-child) {
  margin-right: 20px;
}

.header__link {
  color: #fff;
  font-size: 18px;
}

.header__link:hover {
  color: rgba(87, 214, 255, 1);
}

.header__navigation-mobile{
  display: none;
}

.header__list-mobile{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: translateY(-140%);
  transition: 0.5s ease-in-out;
  background-color: black;
}

.header__list-mobile.active{
  transform: translateY(0%);
}

.header__list-mobile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header__item-mobile:not(:last-child){
  margin-bottom: 40px;
}

.header__link-mobile{
  color: white;
  font-size: 6vw;
}
/* .header__body{
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    align-items: center;
    margin-top: 30px;
    
        .header__navigation{
            margin-left:300px;
            .header__list{
                display: flex;
                
                li{
                    display:flex;
                    list-style-type: none;  
                    margin-left: 40px;
                    white-space: nowrap;
                    
                    @include _1400px{
                        margin-left: 6%;
                    }
                }
    
                a{
                    text-decoration: none;
                    color:white;
                    font-family: Montserrat, sans-serif;
                    transition: 0.5s;
    
                    &:hover{
                        color: rgba(87, 214, 255, 1); 
                    }
                }
            }
        }
    } */

.header__menu {
    width: 30px;
    height: 30px;
    position: relative;
    z-index:2;
    overflow: hidden;
}
.header__menu span {
    width: 30px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    transition: all 0.5s;
}

.header__menu:hover{
    cursor: pointer;
}

.header__menu span:nth-of-type(2) {
    top: calc(50% - 5px);
}
.header__menu span:nth-of-type(3) {
    top: calc(50% + 5px);
}

.header__menu.active span:nth-of-type(1) {
    display: none;
}

.header__menu.active span:nth-of-type(2) {
    top: 50%;
    transform: translate(-50%, 0%) rotate(45deg);  
}
.header__menu.active span:nth-of-type(3) {
    top: 50%;
    transform: translate(-50%, 0%) rotate(-45deg); 
}

.main {
  padding-top: 90px;
  height: 2000px;
}

@media (max-width: 1400px) {
  .container{
    max-width: 1200px;
  }
  
  .header__navigation{
    display: none;
  }
  
  .header__navigation-mobile{
    display: block;
  }
}

@media (max-width: 992px) {
  .container{
    max-width: 750px;
  }
}

@media (max-width: 767px) {
  .container{
    max-width: none;
  }

  .header__navigation{
    display: none;
  }

  .header__navigation-mobile{
    display: block;
  }

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="scss/main.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
        <div class="header__body">
            <div class="container header__wrap">
                <img src="img/logo.svg" alt="" class="header__logo">
                <nav class="header__navigation">
                    <ul class="header__list" id="test">
                        <li class="header__item"><a href="" class="header__link">Главная</a></li>
                        <li class="header__item"><a href="" class="header__link">Сервера</a></li>
                        <li class="header__item"><a href="" class="header__link">Скачать</a></li>
                        <li class="header__item">
                        <a href="" class="header__link">Открыть в браузере</a>
                        </li>
                        <li class="header__item"><a href="" class="header__link">Цены</a></li>
                        <li class="header__item"><a href="" class="header__link">Тех поддержка</a></li>
                        <li class="header__item"><a href="" class="header__link">Контакты</a></li>
                    </ul>
                </nav>

                <nav class="header__navigation-mobile">
                    <ul class="header__list-mobile">
                        <li class="header__item-mobile"><a href="" class="header__link-mobile">Главная</a></li>
                        <li class="header__item-mobile"><a href="" class="header__link-mobile">Сервера</a></li>
                        <li class="header__item-mobile"><a href="" class="header__link-mobile">Скачать</a></li>
                        <li class="header__item-mobile"><a href="" class="header__link-mobile">Открыть в браузере</a></li>
                        <li class="header__item-mobile"><a href="" class="header__link-mobile">Цены</a></li>
                        <li class="header__item-mobile"><a href="" class="header__link-mobile">Тех поддержка</a></li>
                        <li class="header__item-mobile"><a href="" class="header__link-mobile">Контакты</a></li>
                    </ul>
                </nav>

                <div class="header__menu" id="HeaderMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </header>

    
    <main class="main">
    </main>
</body>
<script src="script/script.js"></script>
</html>

1 ответ 1

1

Так делать нехорошо. Не засовывайте навешивание обработчиков в функции.

HeaderMenuBtn.addEventListener('click', function() {
  main.classList.add('active');
  HeaderMenuBtn.addEventListener('click', removeClass);
})

И оба обработчика, после того как 2й создан, очень быстро срабатывают, обнуляют работу друг друга. Нужны проверки, или решение ниже. Чтобы бургер работал достаточно сделать так:

const HeaderMenuBtn = document.getElementById('HeaderMenu');
const main = document.querySelector('.header__list-mobile');


HeaderMenuBtn.addEventListener('click', function() {
  main.classList.toggle('active');
})
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Bold.ttf) format(truetype);
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  font-family: Montserrat, sans-serif;
  background: rgba(20, 28, 36, 1);
}

html,
body {
  height: 100%;
}

.container {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.header__body {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: brown;
}

.header__wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}

.header__list {
  display: flex;
}

.header__item:not(:last-child) {
  margin-right: 20px;
}

.header__link {
  color: #fff;
  font-size: 18px;
}

.header__link:hover {
  color: rgba(87, 214, 255, 1);
}

.header__navigation-mobile {
  display: none;
}

.header__list-mobile {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: translateY(-140%);
  transition: 0.5s ease-in-out;
  background-color: black;
}

.header__list-mobile.active {
  transform: translateY(0%);
}

.header__list-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header__item-mobile:not(:last-child) {
  margin-bottom: 40px;
}

.header__link-mobile {
  color: white;
  font-size: 6vw;
}


/* .header__body{
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    align-items: center;
    margin-top: 30px;
    
        .header__navigation{
            margin-left:300px;
            .header__list{
                display: flex;
                
                li{
                    display:flex;
                    list-style-type: none;  
                    margin-left: 40px;
                    white-space: nowrap;
                    
                    @include _1400px{
                        margin-left: 6%;
                    }
                }
    
                a{
                    text-decoration: none;
                    color:white;
                    font-family: Montserrat, sans-serif;
                    transition: 0.5s;
    
                    &:hover{
                        color: rgba(87, 214, 255, 1); 
                    }
                }
            }
        }
    } */

.header__menu {
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.header__menu span {
  width: 30px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  transition: all 0.5s;
}

.header__menu:hover {
  cursor: pointer;
}

.header__menu span:nth-of-type(2) {
  top: calc(50% - 5px);
}

.header__menu span:nth-of-type(3) {
  top: calc(50% + 5px);
}

.header__menu.active span:nth-of-type(1) {
  display: none;
}

.header__menu.active span:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, 0%) rotate(45deg);
}

.header__menu.active span:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, 0%) rotate(-45deg);
}

.main {
  padding-top: 90px;
  height: 2000px;
}

@media (max-width: 1400px) {
  .container {
    max-width: 1200px;
  }
  .header__navigation {
    display: none;
  }
  .header__navigation-mobile {
    display: block;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 750px;
  }
}

@media (max-width: 767px) {
  .container {
    max-width: none;
  }
  .header__navigation {
    display: none;
  }
  .header__navigation-mobile {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="scss/main.css">
  <title>Document</title>
</head>

<body>
  <header class="header">
    <div class="header__body">
      <div class="container header__wrap">
        <img src="img/logo.svg" alt="" class="header__logo">
        <nav class="header__navigation">
          <ul class="header__list" id="test">
            <li class="header__item"><a href="" class="header__link">Главная</a></li>
            <li class="header__item"><a href="" class="header__link">Сервера</a></li>
            <li class="header__item"><a href="" class="header__link">Скачать</a></li>
            <li class="header__item">
              <a href="" class="header__link">Открыть в браузере</a>
            </li>
            <li class="header__item"><a href="" class="header__link">Цены</a></li>
            <li class="header__item"><a href="" class="header__link">Тех поддержка</a></li>
            <li class="header__item"><a href="" class="header__link">Контакты</a></li>
          </ul>
        </nav>

        <nav class="header__navigation-mobile">
          <ul class="header__list-mobile">
            <li class="header__item-mobile"><a href="" class="header__link-mobile">Главная</a></li>
            <li class="header__item-mobile"><a href="" class="header__link-mobile">Сервера</a></li>
            <li class="header__item-mobile"><a href="" class="header__link-mobile">Скачать</a></li>
            <li class="header__item-mobile"><a href="" class="header__link-mobile">Открыть в браузере</a></li>
            <li class="header__item-mobile"><a href="" class="header__link-mobile">Цены</a></li>
            <li class="header__item-mobile"><a href="" class="header__link-mobile">Тех поддержка</a></li>
            <li class="header__item-mobile"><a href="" class="header__link-mobile">Контакты</a></li>
          </ul>
        </nav>

        <div class="header__menu" id="HeaderMenu">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </header>


  <main class="main">
  </main>
</body>
<script src="script/script.js"></script>

</html>

1
  • Огромное,спасибо, очень помогли
    – Sywuxy
    Commented 18 сент. 2023 в 18:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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