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!
JavaScript
x
71
71
1
document.body.addEventListener('click', function (e) {
2
if (e.target.matches('.fa-grip-lines')) {
3
let elem = document.querySelector('#menuMobile');
4
if (menuMobile.style.display === 'none'&& window.innerWidth < '640') {
5
elem.classList.remove("menuMobile");
6
elem.classList.add("mobile");
7
sousMenu();
8
}
9
else if (window.innerWidth > '640' ) {
10
elem.style.display = 'block';
11
}
12
else
13
{
14
elem.style.display = 'none';
15
elem.classList.remove("mobile");
16
elem.classList.add("menuMobile");
17
18
}
19
}
20
}
21
);
22
23
.menuMobile {
24
margin-top: 10%;
25
margin-left: 10%;
26
margin-right: 10%;
27
margin-bottom: 35%;
28
height: 62%;
29
@media only screen and (max-width: $sm) {
30
display: none;
31
width: 0%;
32
background-color: black;
33
position: absolute;
34
}
35
}
36
.mobile{
37
display : block!important;
38
position : absolute;
39
width: 100%;
40
height : 140%;
41
z-index: 900;
42
// top : -10%;
43
padding : 25% 10% 10% 20%;
44
margin-left: 0%;
45
margin-right: 0%;
46
background-color: black;
47
48
}
49
50
<div class="sous-menu-burger">
51
52
<i class="fas fa-grip-lines"></i>
53
54
</div>
55
56
<div class="cont-main">
57
58
<div id="menuMobile" class="menuMobile">
59
60
<a href="#"><div class="home-a">Home</div></a>
61
62
<a href="#"><div class="about-a">About</div></a>
63
64
<a href="#"><div class="skills-a">Skills</div></a>
65
66
<a href="#"><div class="projects-a">Projects</div></a>
67
68
<a href="#"><div class="contacts-a">Contacts</div></a>
69
70
</div>
71
Advertisement
Answer
Try changing the else if statement from else if (window.innerWidth > '640' ) {
to :else if (menuMobile.style.display != 'block'&& window.innerWidth > '640' ) {