Okay so basically I have to do an internet site for school with HTML but only javascript animation, all the code work proprely but when I want to transform the three lines I use for my hamburger menu into a cross with a javascript animation nothing is happening and I really don’t know why. If someone can help me I will be really greatful as always, thanks for reading.
JavaScript
x
162
162
1
<!doctype html>2
3
<head> 4
<meta charset="utf-8">5
<title>California Hotel</title>6
7
<style>8
* {9
margin: 0;10
padding: 0;11
}12
13
14
body {15
font-family: Arial, Helvetica, sans-serif;16
}17
18
19
.container{20
width: 100%;21
height: 100vh;22
background-color: grey;23
}24
.navbar{25
width: 300px;26
height: 100%;27
background-color: blanchedalmond;28
position: fixed;29
top: 0;30
right: 0;31
display: flex;32
justify-content: center;33
align-items: center;34
border-radius: 10% 0 0 5%;35
}36
37
.hamburger-menu{38
width: 35px;39
height: 30px;40
position: fixed;41
top: 50px;42
right: 50px;43
cursor: pointer;44
display: flex;45
flex-direction: column;46
justify-content: space-around;47
}48
.line{49
width: 100%;50
height: 3px;51
background-color: black;52
53
54
55
56
}57
58
.change .line-1{59
transform: rotate(-45deg) translate(-8px,6px);60
61
}62
.change .line-2{63
opacity: 0;64
}65
66
.change .line-3{67
transform: rotate(45deg) translate(-8px,-6px);;68
}69
70
71
.nav-list{72
text-align: right;73
}74
75
.nav-item{76
list-style: none;77
margin: 25px;78
79
}80
81
.nav-links{82
text-decoration: none;83
font-size: 20px;84
color: rgb(22, 73, 73);85
font-weight: 300;86
letter-spacing: 1px;87
text-transform: uppercase;88
position: relative;89
padding: 3px 0;90
91
}92
.nav-links::before,93
.nav-links::after{94
content: "";95
width: 100%;96
height: 2px;97
background-color: orange;98
position: absolute;99
left: 0;100
transform: scaleX(0);101
transition: transform 0.5s;102
103
104
105
}106
107
.nav-links::after{108
bottom: 0;109
transform-origin: right;110
}111
112
.nav-links::before{113
top: 0;114
transform-origin: left;115
}116
117
.nav-links:hover::before,118
.nav-links:hover::after{119
transform: scaleX(1);120
}121
122
123
</style>124
</head>125
<body> 126
127
128
<div class="container">129
<nav class="navbar">130
<div class="hamburger-menu">131
<div class="line line-1"></div>132
<div class="line line-2"></div>133
<div class="line line-3"></div>134
</div>135
136
137
138
<ul class="nav-list">139
<li class="nav-item">140
<a href="#" class="nav-links">A PROPOS</a>141
</li>142
<li class="nav-item">143
<a href="#" class="nav-links">NOUS CONTACTER</a>144
</li>145
<li class="nav-item">146
<a href="#" class="nav-links">NOS RESEAUX SOCIAUX</a>147
</li>148
</ul>149
</nav>150
</div>151
152
<script>153
const menuIcon = document.querySelector(".hamburger-menu");154
const navbar = document.querySelector(".nabar");155
MenuIcon.addEventListener("click",() => {156
navbar.classList.toggle(".change")});157
</script>158
159
160
</body> 161
</html> 162
Advertisement
Answer
here is your correct code : missing ; and remove . before class in javascript code. good luck.
JavaScript
1
5
1
const MenuIcon = document.querySelector(".hamburger-menu");2
const navbar = document.querySelector(".navbar");3
MenuIcon.addEventListener("click", () => {4
navbar.classList.toggle("change");5
});JavaScript
1
118
118
1
* {2
margin: 0;3
padding: 0;4
}5
6
7
body {8
font-family: Arial, Helvetica, sans-serif;9
}10
11
12
.container {13
width: 100%;14
height: 100vh;15
background-color: grey;16
}17
18
.navbar {19
width: 300px;20
height: 100%;21
background-color: blanchedalmond;22
position: fixed;23
top: 0;24
right: 0;25
display: flex;26
justify-content: center;27
align-items: center;28
border-radius: 10% 0 0 5%;29
}30
31
.hamburger-menu {32
width: 35px;33
height: 30px;34
position: fixed;35
top: 50px;36
right: 50px;37
cursor: pointer;38
display: flex;39
flex-direction: column;40
justify-content: space-around;41
}42
43
.line {44
width: 100%;45
height: 3px;46
background-color: black;47
48
49
50
51
}52
53
.change .line-1 {54
transform: rotate(-45deg) translate(-8px, 6px);55
56
}57
58
.change .line-2 {59
opacity: 0;60
}61
62
.change .line-3 {63
transform: rotate(45deg) translate(-8px, -6px);64
;65
}66
67
68
.nav-list {69
text-align: right;70
}71
72
.nav-item {73
list-style: none;74
margin: 25px;75
76
}77
78
.nav-links {79
text-decoration: none;80
font-size: 20px;81
color: rgb(22, 73, 73);82
font-weight: 300;83
letter-spacing: 1px;84
text-transform: uppercase;85
position: relative;86
padding: 3px 0;87
88
}89
90
.nav-links::before,91
.nav-links::after {92
content: "";93
width: 100%;94
height: 2px;95
background-color: orange;96
position: absolute;97
left: 0;98
transform: scaleX(0);99
transition: transform 0.5s;100
101
102
103
}104
105
.nav-links::after {106
bottom: 0;107
transform-origin: right;108
}109
110
.nav-links::before {111
top: 0;112
transform-origin: left;113
}114
115
.nav-links:hover::before,116
.nav-links:hover::after {117
transform: scaleX(1);118
}JavaScript
1
23
23
1
<div class="container">2
<nav class="navbar">3
<div class="hamburger-menu">4
<div class="line line-1"></div>5
<div class="line line-2"></div>6
<div class="line line-3"></div>7
</div>8
9
10
11
<ul class="nav-list">12
<li class="nav-item">13
<a href="#" class="nav-links">A PROPOS</a>14
</li>15
<li class="nav-item">16
<a href="#" class="nav-links">NOUS CONTACTER</a>17
</li>18
<li class="nav-item">19
<a href="#" class="nav-links">NOS RESEAUX SOCIAUX</a>20
</li>21
</ul>22
</nav>23
</div>