var sideMenu = document.querySelector('#menu-1'); var docBody = document.querySelector('body'); // to store the corresponding effect var effect; // adding a click event to all the buttons document.querySelectorAll('.navbar-toggler').forEach(navbar => navbar.addEventListener('click', addClass)); document.querySelector('.close-side').addEventListener('click', closeSide); function addClass(e) { // to get the correct effect e.stopPropagation(); // console.log('HERE') effect = e.target.getAttribute('data-effect'); // adding the effects sideMenu.classList.add('st-menu-open'); // docBody.style.overflow = "hidden"; } function closeSide(e) { e && e.preventDefault(); sideMenu.classList.remove('st-menu-open'); } window.addEventListener('click', e => { if(e.target != sideMenu){ closeSide(); } })