Всё облазил, нигде не нашёл ответа, помогите пожалуйста
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>