0

Всё облазил, нигде не нашёл ответа, помогите пожалуйста

document.querySelector('.dropbtn').addEventListener('click', function(e) {
  e.preventDefault();
  if(this.classList.contains('is-active')) {
    console.log('закрыть');
    this.classList.remove('is-active');
    document.querySelector('#dropmenu').classList.remove('show');

  }
  else {
    console.log('открыть');
    this.classList.add('is-active');
    document.querySelector('#dropmenu').classList.add('show');
  }
})
.hamburger-menu {
  cursor: pointer;
  margin-bottom: auto !important;
  margin-top: 10px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 60px;
}
  
.bar,
.bar:after,
.bar:before {
  width: 50px;
  height: 5px;
}
  
.bar {
  position: relative;
  transform: translateY(25px);
  background: white;
  transition: all 0ms 300ms;
}
.bar.animate {
  background: rgba(255, 255, 255, 0);
}
  
.bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px;
  background: white;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
  
.bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  background: white;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
  
.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
  
.bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
<div class="hamburger-menu ml-auto">
   <button class="bar dropbtn"></button>
</div>

2
  • где в разметке и в стилях #dropmenu и .show ? без них не ясно. В логике кода вроде всё верно. Но допускаю, что у вас с классом show проблемы. А его мы не видим в стилях. 4 июн 2022 в 11:45
  • .show { display: flex !important; position: absolute; }
    – Hotring
    4 июн 2022 в 17:13

2 ответа 2

0

Не хватает кусков кода с #dropdownmenu, .show поэтому не совсем понятно, что у вас не работает Вот код, для добавления нужных классов к этим элементам при нажатии на кнопку, а при повторном нажатии эти классы будут убираться

JS:

let menu = document.getElementById('dropmenu');

document.querySelector('.dropbtn').addEventListener('click', function () {
  this.classList.toggle('is-active');
  menu.classList.toggle('show');
});

HTML:

 <div class="hamburger-menu ml-auto">
    <button class="bar dropbtn"></button>
 </div>
 <div id="dropmenu">menu items</div>
1
  • Оно вроде работает, а вроде нет. При первом запуске страницы срабатывает со 2 раза. Когда уже покликал несколько раз, срабатывает нормально. .show { display: flex !important; position: absolute; }
    – Hotring
    4 июн 2022 в 17:15
0

Проблема решена, всем кто ответил - спасибо. У меня просто был ещё один скрипт для анимации кнопки, в итоге срабатывал сначала он, а потом уже вывод менюшки

Ваш ответ

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

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