Есть прототип меню работающего по checkbox. Когда checkbox.checked == true, меню открывается, если false закрывается, а так же если клик был вне меню(серая зона), то меню закрывается, а checkbox.checked == false. Код:
let checkbox = document.getElementById('menu-checkbox');
let menu = document.querySelector('.menu');
checkbox.addEventListener('click', () => {
menu.classList.toggle('hidden');
})
menu.addEventListener('click', (event) => {
if (event.target.classList.contains('menu')) {
menu.classList.toggle('hidden');
checkbox.checked = false;
}
})
.menu{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90%;
background-color: rgba(20,20,20,0.3);
}
.menu-item{
width: 300px;
height: 200px;
background-color: beige;
}
.hidden {
visibility: hidden;
}
<input type="checkbox" id="menu-checkbox" name="vehicle1" value="Bike">
<div class="menu hidden">
<div class="menu-item"></div>
</div>
Как добавить плавность открытия и закрытия меню?