I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay. I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.
JavaScript
x
9
1
$('#toggle').click(function () {
2
$(this).toggleClass('active');
3
$('#overlay').toggleClass('open');
4
});
5
6
$(".fulloverlay a").on("click", function() {
7
$('#toggle').toggleClass('active');
8
$('#overlay').toggleClass('open');
9
});
JavaScript
1
217
217
1
.container {
2
position: absolute;
3
width: 100%;
4
height: 100%;
5
text-align: center;
6
top: 40%;
7
left: 0;
8
margin: 0 auto;
9
font-family: 'Roboto', sans-serif;
10
}
11
.container p {
12
font-size: 20px;
13
}
14
.container a {
15
display: inline-block;
16
position: relative;
17
text-align: center;
18
color: #FF5252;
19
text-decoration: none;
20
font-size: 20px;
21
overflow: hidden;
22
top: 5px;
23
}
24
.container a:after {
25
content: '';
26
position: absolute;
27
background: #FF5252;
28
height: 2px;
29
width: 0%;
30
transform: translateX(-50%);
31
left: 50%;
32
bottom: 0;
33
transition: 0.35s ease;
34
}
35
.container a:hover:after {
36
width: 100%;
37
}
38
39
h1 {
40
position: relative;
41
text-align: center;
42
font-family: 'Vollkorn', sans-serif;
43
}
44
45
.button_container {
46
position: fixed;
47
top: 5%;
48
right: 2%;
49
height: 27px;
50
width: 35px;
51
cursor: pointer;
52
z-index: 100;
53
transition: opacity 0.25s ease;
54
}
55
.button_container:hover {
56
opacity: 0.7;
57
}
58
.button_container.active .top {
59
transform: translateY(10px) translateX(0) rotate(45deg);
60
background: #FFF;
61
}
62
.button_container.active .middle {
63
opacity: 0;
64
background: #FFF;
65
}
66
.button_container.active .bottom {
67
transform: translateY(-10px) translateX(0) rotate(-45deg);
68
background: #FFF;
69
}
70
.button_container span {
71
background: #FF5252;
72
border: none;
73
height: 5px;
74
width: 100%;
75
position: absolute;
76
top: 0px;
77
left: 0;
78
transition: all 0.35s ease;
79
cursor: pointer;
80
}
81
.button_container span:nth-of-type(2) {
82
top: 10px;
83
}
84
.button_container span:nth-of-type(3) {
85
top: 20px;
86
}
87
88
.overlay {
89
position: fixed;
90
top: 0;
91
left: 0;
92
width: 100%;
93
height: 100%;
94
opacity: 1;
95
visibility: hidden;
96
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
97
z-index: 50;
98
}
99
.overlay:before {
100
content: '';
101
background: #FF5252;
102
left: -55%;
103
top: 0;
104
width: 50%;
105
height: 100%;
106
position: absolute;
107
transition: left 0.35s ease;
108
}
109
.overlay:after {
110
content: '';
111
background: #FF5252;
112
right: -55%;
113
top: 0;
114
width: 50%;
115
height: 100%;
116
position: absolute;
117
transition: all 0.35s ease;
118
}
119
.overlay.open {
120
opacity: 0.9;
121
visibility: visible;
122
height: 100%;
123
}
124
.overlay.open:before {
125
left: 0;
126
}
127
.overlay.open:after {
128
right: 0;
129
}
130
.overlay.open li {
131
-webkit-animation: fadeInRight 0.5s ease forwards;
132
animation: fadeInRight 0.5s ease forwards;
133
-webkit-animation-delay: 0.35s;
134
animation-delay: 0.35s;
135
}
136
.overlay.open li:nth-of-type(2) {
137
-webkit-animation-delay: 0.45s;
138
animation-delay: 0.45s;
139
}
140
.overlay.open li:nth-of-type(3) {
141
-webkit-animation-delay: 0.55s;
142
animation-delay: 0.55s;
143
}
144
.overlay.open li:nth-of-type(4) {
145
-webkit-animation-delay: 0.65s;
146
animation-delay: 0.65s;
147
}
148
.overlay nav {
149
position: relative;
150
height: 70%;
151
top: 50%;
152
transform: translateY(-50%);
153
font-size: 50px;
154
font-family: 'Vollkorn', serif;
155
font-weight: 400;
156
text-align: center;
157
z-index: 100;
158
}
159
.overlay ul {
160
list-style: none;
161
padding: 0;
162
margin: 0 auto;
163
display: inline-block;
164
position: relative;
165
height: 100%;
166
}
167
.overlay ul li {
168
display: block;
169
height: 25%;
170
height: calc(100% / 4);
171
min-height: 50px;
172
position: relative;
173
opacity: 0;
174
}
175
.overlay ul li a {
176
display: block;
177
position: relative;
178
color: #FFF;
179
text-decoration: none;
180
overflow: hidden;
181
}
182
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
183
width: 100%;
184
}
185
.overlay ul li a:after {
186
content: '';
187
position: absolute;
188
bottom: 0;
189
left: 50%;
190
width: 0%;
191
transform: translateX(-50%);
192
height: 3px;
193
background: #FFF;
194
transition: 0.35s;
195
}
196
197
@-webkit-keyframes fadeInRight {
198
0% {
199
opacity: 0;
200
left: 20%;
201
}
202
100% {
203
opacity: 1;
204
left: 0;
205
}
206
}
207
208
@keyframes fadeInRight {
209
0% {
210
opacity: 0;
211
left: 20%;
212
}
213
100% {
214
opacity: 1;
215
left: 0;
216
}
217
}
JavaScript
1
25
25
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<body translate='no' >
3
<div class='container'>
4
<h1>Top right corner, click it!</h1>
5
</div>
6
7
<div class='button_container' id='toggle'>
8
<span class='top'></span>
9
<span class='middle'></span>
10
<span class='bottom'></span>
11
</div>
12
13
<div class='overlay' id='overlay'>
14
<nav class='overlay-menu' id="fulloverlay">
15
<ul>
16
<li><a href='#about2' >Home</a></li>
17
<li><a href='#'>About</a></li>
18
<li><a href='#'>Work</a></li>
19
<li><a href='#'>Contact</a></li>
20
</ul>
21
</nav>
22
</div>
23
24
<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
25
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>
Advertisement
Answer
I tried this code on my side and noticed one small change would work in this case.
You are selecting anchors(a) using wrong selector. As ‘fulloverlay’ is the Id of the parent nav element so instead of selecting it like:
JavaScript
1
5
1
$(".fulloverlay a").on("click", function() {
2
$('#toggle').toggleClass('active');
3
$('#overlay').toggleClass('open');
4
});
5
You can write like this:
JavaScript
1
5
1
$("#fulloverlay a").on("click", function() {
2
$('#toggle').toggleClass('active');
3
$('#overlay').toggleClass('open');
4
});
5
then it works.