Scenario: Utilizing a snippet of JQuery to add an event to an element according to its ID. This event slides a menu from the left side of the screen.
Inquiry: As the screen size decreases to <710px, I plan to conceal the original element and reveal a new one (just another icon). However, I aim for this new element to trigger the same event. Should I separately assign the event to both elements or is there a way to combine them into one Event?
Take a look at the example below which showcases my HTML, JS, and CSS. PLEASE KEEP IN MIND THAT THE TRIGGER WILL ONLY FUNCTION IF THE TEST WINDOW WIDTH IS ABOVE 711PX
window.onload = function(){
document.getElementById('megga-nav-toggle').addEventListener('click', function () {
var documentBody = $('#megga-global-menu');
documentBody.toggleClass('is-active');
if (documentBody.hasClass('hide-megga')) {
documentBody.removeClass('hide-megga');
return;
}
documentBody.addClass('hide-megga');
});
document.getElementById("megga-global-menu").addEventListener("mouseleave", menuHide);
};
function menuHide() {
document.getElementById("megga-global-menu").classList.add('hide-megga');
} #megga-global-menu {
background: red ;
position: fixed;
top: 50px;
bottom: 0;
left:0px;
width: 200px;
z-index: 1000000;
transition: ease all .6s;
}
#megga-global-menu.hide-megga {
left: -200px;
transition: ease all .6s;
}
#megga-nav-toggle {
display: inline-block;
z-index:999998;
font-size: 30px;
color: #000;
cursor: pointer;
}
@media screen and (min-width: 710px) {
#megga-navmobile-toggle {
display:none;
}
}
@media screen and (max-width: 710px) {
#megga-nav-toggle {
display:none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="megga-nav-toggle">FULL SCREEN</span><Bn/><Br/>
<span id="megga-navmobile-toggle">MOBILE SCREEN</span>
<div id="megga-global-menu" class="">
My slide out menu goes here!
</div>