I'm trying to made a burger menu with CSS/JS.
I have a navbar (nav) menu that display like this in computers:
And in Burger Menu when the resolution is less than 768 px (resolutions for tablet and devices that is under this resolution) like this:
The burger menu button is hidden (with display:none) when we are in computers, but I make it appear when the resolution is (>768px), and it shown, and with Javascript I grab this button and add event Listener to it.
When we click on the burger button, a list menu ( element) have to appear form the right to left with translateX(0%), because I made the list initially transform:translateX(-100%) to go out of the screen (I add to body an overflow-x:hidden to hide the excess and to provide a horizontal scrollbar, anyway)..
The style for the ul.nav_links initially:
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: rgb(68, 122, 122);
display: flex;
flex-direction: column;
width: 50%;
transition: transform 2s;
transform: translateX(100%);
The class I want to add (just to return to 0%):
// Class to add in JavaScript
.nav_active {
transform: translateX(0%);
}
The Js code:
//grabbing the burger button
let burger=document.querySelector(".burger");
//grabbing the ul element with class (nav_links)
let nav=document.querySelector(".nav_links");
//Add the listener to burger button, that have to toggle the class "nav_active"
burger.addEventListener("click",()=>{
nav.classList.toggle("nav_active");
})
But for some reason the class (named:nav_active), is adding correctly to the (I use the devtools of Chrome and the class toggle each time I click on it, i can see the class add and remove to), but the transform:translateX(0%), it doesn't works.
I don't know why ?
question from:
https://stackoverflow.com/questions/65891061/navbar-menu-responsive 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…