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.
<!doctype html> <head> <meta charset="utf-8"> <title>California Hotel</title> <style> * { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; } .container{ width: 100%; height: 100vh; background-color: grey; } .navbar{ width: 300px; height: 100%; background-color: blanchedalmond; position: fixed; top: 0; right: 0; display: flex; justify-content: center; align-items: center; border-radius: 10% 0 0 5%; } .hamburger-menu{ width: 35px; height: 30px; position: fixed; top: 50px; right: 50px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; } .line{ width: 100%; height: 3px; background-color: black; } .change .line-1{ transform: rotate(-45deg) translate(-8px,6px); } .change .line-2{ opacity: 0; } .change .line-3{ transform: rotate(45deg) translate(-8px,-6px);; } .nav-list{ text-align: right; } .nav-item{ list-style: none; margin: 25px; } .nav-links{ text-decoration: none; font-size: 20px; color: rgb(22, 73, 73); font-weight: 300; letter-spacing: 1px; text-transform: uppercase; position: relative; padding: 3px 0; } .nav-links::before, .nav-links::after{ content: ""; width: 100%; height: 2px; background-color: orange; position: absolute; left: 0; transform: scaleX(0); transition: transform 0.5s; } .nav-links::after{ bottom: 0; transform-origin: right; } .nav-links::before{ top: 0; transform-origin: left; } .nav-links:hover::before, .nav-links:hover::after{ transform: scaleX(1); } </style> </head> <body> <div class="container"> <nav class="navbar"> <div class="hamburger-menu"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> </div> <ul class="nav-list"> <li class="nav-item"> <a href="#" class="nav-links">A PROPOS</a> </li> <li class="nav-item"> <a href="#" class="nav-links">NOUS CONTACTER</a> </li> <li class="nav-item"> <a href="#" class="nav-links">NOS RESEAUX SOCIAUX</a> </li> </ul> </nav> </div> <script> const menuIcon = document.querySelector(".hamburger-menu"); const navbar = document.querySelector(".nabar"); MenuIcon.addEventListener("click",() => { navbar.classList.toggle(".change")}); </script> </body> </html>
Advertisement
Answer
here is your correct code : missing ; and remove . before class in javascript code. good luck.
const MenuIcon = document.querySelector(".hamburger-menu"); const navbar = document.querySelector(".navbar"); MenuIcon.addEventListener("click", () => { navbar.classList.toggle("change"); });
* { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; } .container { width: 100%; height: 100vh; background-color: grey; } .navbar { width: 300px; height: 100%; background-color: blanchedalmond; position: fixed; top: 0; right: 0; display: flex; justify-content: center; align-items: center; border-radius: 10% 0 0 5%; } .hamburger-menu { width: 35px; height: 30px; position: fixed; top: 50px; right: 50px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; } .line { width: 100%; height: 3px; background-color: black; } .change .line-1 { transform: rotate(-45deg) translate(-8px, 6px); } .change .line-2 { opacity: 0; } .change .line-3 { transform: rotate(45deg) translate(-8px, -6px); ; } .nav-list { text-align: right; } .nav-item { list-style: none; margin: 25px; } .nav-links { text-decoration: none; font-size: 20px; color: rgb(22, 73, 73); font-weight: 300; letter-spacing: 1px; text-transform: uppercase; position: relative; padding: 3px 0; } .nav-links::before, .nav-links::after { content: ""; width: 100%; height: 2px; background-color: orange; position: absolute; left: 0; transform: scaleX(0); transition: transform 0.5s; } .nav-links::after { bottom: 0; transform-origin: right; } .nav-links::before { top: 0; transform-origin: left; } .nav-links:hover::before, .nav-links:hover::after { transform: scaleX(1); }
<div class="container"> <nav class="navbar"> <div class="hamburger-menu"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> </div> <ul class="nav-list"> <li class="nav-item"> <a href="#" class="nav-links">A PROPOS</a> </li> <li class="nav-item"> <a href="#" class="nav-links">NOUS CONTACTER</a> </li> <li class="nav-item"> <a href="#" class="nav-links">NOS RESEAUX SOCIAUX</a> </li> </ul> </nav> </div>