I would like to use part of this code from codepen on my website but the menu button does not currently work. I do not know what the problem is so I have not tried anything to solve it. The code works flawlessly on codepen but stops working when use in visual studio. The HTML code is:
JavaScript
x
32
32
1
<section class="showcase">
2
<header>
3
<h2 class="logo">Travel</h2>
4
<div class="toggle"></div>
5
</header>
6
<video src="https://traversymedia.com/downloads/videos/explore.mp4" muted loop autoplay></video>
7
<div class="overlay"></div>
8
<div class="text">
9
<h2>Never Stop To </h2>
10
<h3>Exploring The World</h3>
11
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
12
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
13
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
14
consequat.</p>
15
<a href="#">Explore</a>
16
</div>
17
<ul class="social">
18
<li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
19
<li><a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
20
<li><a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
21
</ul>
22
</section>
23
<div class="menu">
24
<ul>
25
<li><a href="#">Home</a></li>
26
<li><a href="#">News</a></li>
27
<li><a href="#">Destination</a></li>
28
<li><a href="#">Blog</a></li>
29
<li><a href="#">Contact</a></li>
30
</ul>
31
</div>
32
The CSS:
JavaScript
1
204
204
1
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
2
*
3
{
4
margin: 0;
5
padding: 0;
6
box-sizing: border-box;
7
font-family: 'Poppins', sans-serif;
8
}
9
header
10
{
11
position: absolute;
12
top: 0;
13
left: 0;
14
width: 100%;
15
padding: 40px 100px;
16
z-index: 1000;
17
display: flex;
18
justify-content: space-between;
19
align-items: center;
20
}
21
header .logo
22
{
23
color: #fff;
24
text-transform: uppercase;
25
cursor: pointer;
26
}
27
.toggle
28
{
29
position: relative;
30
width: 60px;
31
height: 60px;
32
background: url(https://i.ibb.co/HrfVRcx/menu.png);
33
background-repeat: no-repeat;
34
background-size: 30px;
35
background-position: center;
36
cursor: pointer;
37
}
38
.toggle.active
39
{
40
background: url(https://i.ibb.co/rt3HybH/close.png);
41
background-repeat: no-repeat;
42
background-size: 25px;
43
background-position: center;
44
cursor: pointer;
45
}
46
.showcase
47
{
48
position: absolute;
49
right: 0;
50
width: 100%;
51
min-height: 100vh;
52
padding: 100px;
53
display: flex;
54
justify-content: space-between;
55
align-items: center;
56
background: #111;
57
transition: 0.5s;
58
z-index: 2;
59
}
60
.showcase.active
61
{
62
right: 300px;
63
}
64
65
.showcase video
66
{
67
position: absolute;
68
top: 0;
69
left: 0;
70
width: 100%;
71
height: 100%;
72
object-fit: cover;
73
opacity: 0.8;
74
}
75
.overlay
76
{
77
position: absolute;
78
top: 0;
79
left: 0;
80
width: 100%;
81
height: 100%;
82
background: #03a9f4;
83
mix-blend-mode: overlay;
84
}
85
.text
86
{
87
position: relative;
88
z-index: 10;
89
}
90
91
.text h2
92
{
93
font-size: 5em;
94
font-weight: 800;
95
color: #fff;
96
line-height: 1em;
97
text-transform: uppercase;
98
}
99
.text h3
100
{
101
font-size: 4em;
102
font-weight: 700;
103
color: #fff;
104
line-height: 1em;
105
text-transform: uppercase;
106
}
107
.text p
108
{
109
font-size: 1.1em;
110
color: #fff;
111
margin: 20px 0;
112
font-weight: 400;
113
max-width: 700px;
114
}
115
.text a
116
{
117
display: inline-block;
118
font-size: 1em;
119
background: #fff;
120
padding: 10px 30px;
121
text-transform: uppercase;
122
text-decoration: none;
123
font-weight: 500;
124
margin-top: 10px;
125
color: #111;
126
letter-spacing: 2px;
127
transition: 0.2s;
128
}
129
.text a:hover
130
{
131
letter-spacing: 6px;
132
}
133
.social
134
{
135
position: absolute;
136
z-index: 10;
137
bottom: 20px;
138
display: flex;
139
justify-content: center;
140
align-items: center;
141
}
142
.social li
143
{
144
list-style: none;
145
}
146
.social li a
147
{
148
display: inline-block;
149
margin-right: 20px;
150
filter: invert(1);
151
transform: scale(0.5);
152
transition: 0.5s;
153
}
154
.social li a:hover
155
{
156
transform: scale(0.5) translateY(-15px);
157
}
158
.menu
159
{
160
position: absolute;
161
top: 0;
162
right: 0;
163
width: 300px;
164
height: 100%;
165
display: flex;
166
justify-content: center;
167
align-items: center;
168
}
169
.menu ul
170
{
171
position: relative;
172
}
173
.menu ul li
174
{
175
list-style: none;
176
}
177
.menu ul li a
178
{
179
text-decoration: none;
180
font-size: 24px;
181
color: #111;
182
}
183
.menu ul li a:hover
184
{
185
color: #03a9f4;
186
}
187
188
@media (max-width: 991px)
189
{
190
.showcase,
191
.showcase header
192
{
193
padding: 40px;
194
}
195
.text h2
196
{
197
font-size: 3em;
198
}
199
.text h3
200
{
201
font-size: 2em;
202
}
203
}
204
And the JS:
JavaScript
1
8
1
const menuToggle = document.querySelector('.toggle');
2
const showcase = document.querySelector('.showcase');
3
4
menuToggle.addEventListener('click', () => {
5
menuToggle.classList.toggle('active');
6
showcase.classList.toggle('active');
7
})
8
Is there any way to fix this issue? Any help is appriciated!
Advertisement
Answer
Change you script as this:
JavaScript
1
13
13
1
<script>
2
window.addEventListener('load', () => {
3
const menuToggle = document.querySelector('.toggle');
4
const showcase = document.querySelector('.showcase');
5
6
menuToggle.addEventListener('click', () => {
7
menuToggle.classList.toggle('active');
8
showcase.classList.toggle('active');
9
})
10
});
11
</script>
12
13