Con JavaScript e CSS possiamo implementare un menu di tipo push.
Usiamo questi stili CSS:
html, body {
overflow-x: hidden;
}
#menu {
position: fixed;
top: 0;
left: 0;
transform: translateX(-300px);
width: 300px;
height: 100vh;
transition: all .3s ease-in;
background-color: #fff;
}
#menu.open {
transform: translateX(0);
}
Quindi con JavaScript avremo:
const toggle = document.querySelector('#toggle-menu');
const menu = document.querySelector('#menu');
toggle.addEventListener('click', e => {
e.preventDefault();
menu.classList.toggle('open');
}, false);