Есть код для выпадающего меню, но он на jQuery, попытался переписать сам, но что-то не работает
Код jQuery:
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});
Мои попытки:
function buttonClick() {
const toggleButton = document.querySelector('.toggle-button');
const menuWrap = document.querySelector('.menu-wrap');
toggleButton.addEventListener('click', () => {
this.classList.toggle('button-open');
menuWrap.classList.toggle('menu-show')
});
}
HTML и CSS:
<span onclick="buttonClick()" class="toggle-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>
<div class="menu-wrap">
<div class="menu-sidebar">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
.toggle-button {
position: absolute;
right: 0;
top: 50px;
margin-right: 50px;
width: 44px;
height: 40px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}
.menu-wrap {
display: none;
background-color: #8B0000;
opacity: 50%;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 950px;
font-size: 30px;
overflow: auto;
transition: .25s;
z-index: 10;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}