To hide the menu when I click on windows or scroll, I tried like this.
JavaScript
x
67
67
1
var flag=0;
2
3
function myFunction(x) {
4
x.classList.toggle("change");
5
document.getElementById("myDropdown").classList.toggle("show");
6
}
7
8
window.onclick = function(event) {
9
if (flag==0) {
10
flag=1;
11
}
12
else if (flag==1) {
13
var dropdowns = document.getElementsByClassName("dropdown-content");
14
var i;
15
for (i = 0; i < dropdowns.length; i++) {
16
var openDropdown = dropdowns[i];
17
if (openDropdown.classList.contains('show')) {
18
openDropdown.classList.remove('show');
19
}
20
}
21
var menu_btn = document.getElementsByClassName("menu_btn");
22
var i;
23
for (i = 0; i < menu_btn.length; i++) {
24
var openDropdown = menu_btn[i];
25
if (openDropdown.classList.contains('change')) {
26
openDropdown.classList.remove('change');
27
}
28
}
29
flag=0;
30
}
31
}
32
window.addEventListener("scroll", function() {
33
if (flag==1) {
34
var dropdowns = document.getElementsByClassName("dropdown-content");
35
var i;
36
for (i = 0; i < dropdowns.length; i++) {
37
var openDropdown = dropdowns[i];
38
if (openDropdown.classList.contains('show')) {
39
openDropdown.classList.remove('show');
40
}
41
}
42
var menu_btn = document.getElementsByClassName("menu_btn");
43
var i;
44
for (i = 0; i < menu_btn.length; i++) {
45
var openDropdown = menu_btn[i];
46
if (openDropdown.classList.contains('change')) {
47
openDropdown.classList.remove('change');
48
}
49
}
50
flag=0;
51
}
52
});
53
54
function menuclick(underline) {
55
var focused = document.getElementsByClassName("focused");
56
var i;
57
for (i = 0; i < focused.length; i++) {
58
var under = focused[i];
59
if (under.classList.contains('focused')) {
60
under.classList.remove('focused');
61
}
62
}
63
if (!underline.parentElement.classList.contains('focused')) {
64
underline.parentElement.classList.add('focused');
65
}
66
}
67
My html is like this.
JavaScript
1
25
25
1
<div class="navbar bg-dark pt-3 pb-0 pl-4 pr-0 fixed-top">
2
<div class="navbar-brand float-left">
3
<a href="#"><img src="assets/img/logo.png"></a>
4
</div>
5
<div class="float-right mr-4 menu-bar">
6
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
7
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
8
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
9
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
10
</div>
11
<div class="dropdown-btn">
12
<div class="menu_btn" onclick="myFunction(this)">
13
<div class="bar1"></div>
14
<div class="bar2"></div>
15
<div class="bar3"></div>
16
</div>
17
<div id="myDropdown" class="dropdown-content">
18
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
19
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
20
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
21
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
22
</div>
23
</div>
24
</div>
25
And css is like this.
JavaScript
1
99
99
1
a {
2
text-decoration: none;
3
}
4
a:hover {
5
cursor: pointer;
6
}
7
.a-border {
8
display: inline-block;
9
position: relative;
10
color: white;
11
padding: 0.5rem 0.25rem;
12
margin: 0 1.5rem;
13
overflow: hidden;
14
}
15
.a-border::after {
16
content: url("../img/more-btn-bottom.png");
17
display: block;
18
position: absolute;
19
bottom: 0;
20
left: -0.25rem;
21
border: none;
22
transform: scale(0, 1);
23
transform-origin: 0% 100%;
24
transition: transform 0.4s;
25
}
26
a:hover .a-border::after {
27
transform:scale(1, 1);
28
}
29
a.focused .a-border::after {
30
transform: none;
31
}
32
.banner {
33
position: relative;
34
z-index: 2;
35
}
36
.menu-bar {
37
z-index: 3;
38
}
39
.menu-btn {
40
display: inline-block;
41
cursor: pointer;
42
z-index: 3;
43
}
44
45
.bar1, .bar2, .bar3 {
46
width: 35px;
47
height: 5px;
48
background-color: #fff;
49
margin: 6px 0;
50
transition: 0.4s;
51
}
52
53
.change .bar1 {
54
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
55
transform: rotate(-45deg) translate(-9px, 6px);
56
}
57
58
.change .bar2 {opacity: 0;}
59
60
.change .bar3 {
61
-webkit-transform: rotate(45deg) translate(-8px, -8px);
62
transform: rotate(45deg) translate(-8px, -8px);
63
}
64
65
.dropdown-btn {
66
position: relative;
67
display: inline-block;
68
z-index: 3;
69
}
70
71
.dropdown-content {
72
display: none;
73
position: absolute;
74
right: 20px;
75
background-color: #343a40;
76
min-width: 160px;
77
overflow: auto;
78
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
79
z-index: 1000;
80
}
81
82
.show {display: block;}
83
@media screen and (min-width: 780px) {
84
.menu-bar {
85
display: block;
86
}
87
.dropdown-btn {
88
display: none;
89
}
90
}
91
@media screen and (max-width: 779px){
92
.menu-bar {
93
display: none;
94
}
95
.dropdown-btn {
96
display: block;
97
}
98
}
99
If you try this code, you can find when you click window once, then the button doesn’t work. When I click windows once, dropdown showed when I click the button twice. I want to solve this. I think you know more than me, so I want someone to solve this.
Advertisement
Answer
you can add event.stopPropagation to the menu button click.
JavaScript
1
2
1
<div class="menu_btn" onclick="event.stopPropagation(); myFunction(this)">
2
that way when you click the button you won’t also click the window below.