I’ve a navigation menu which dissappears when the breakpoint is 640px and an icon appears. When I click on this icon my menu reopens and it doesn’t close and when I resize the browser it doesn’t back to the normal style. For sure sth doesn’t work in my if satements.
Thanks for your help!
document.body.addEventListener('click', function (e) {
if (e.target.matches('.fa-grip-lines')) {
let elem = document.querySelector('#menuMobile');
if (menuMobile.style.display === 'none'&& window.innerWidth < '640') {
elem.classList.remove("menuMobile");
elem.classList.add("mobile");
sousMenu();
}
else if (window.innerWidth > '640' ) {
elem.style.display = 'block';
}
else
{
elem.style.display = 'none';
elem.classList.remove("mobile");
elem.classList.add("menuMobile");
}
}
}
);
.menuMobile {
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 35%;
height: 62%;
@media only screen and (max-width: $sm) {
display: none;
width: 0%;
background-color: black;
position: absolute;
}
}
.mobile{
display : block!important;
position : absolute;
width: 100%;
height : 140%;
z-index: 900;
// top : -10%;
padding : 25% 10% 10% 20%;
margin-left: 0%;
margin-right: 0%;
background-color: black;
}
<div class="sous-menu-burger">
<i class="fas fa-grip-lines"></i>
</div>
<div class="cont-main">
<div id="menuMobile" class="menuMobile">
<a href="#"><div class="home-a">Home</div></a>
<a href="#"><div class="about-a">About</div></a>
<a href="#"><div class="skills-a">Skills</div></a>
<a href="#"><div class="projects-a">Projects</div></a>
<a href="#"><div class="contacts-a">Contacts</div></a>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…