javaScript click event

1

I’m working on a responsive nav bar that turns into a hamburger menu on smaller screens, and also becomes a dropdown navbar.

I have the navbar built out, but have it hidden using ‘transform: translateX(100%)’ and ‘overflow-x hidden’, but now what I want to do is make it unhidden when the hamburger menu is clicked.

I’m assuming I need to target the “nav-links” selector with a javaScript click event. After much reading up on it I’m not really any further, so any help or suggestions would be greatly appreciated! What I’m working on: https://codepen.io/MarcelPenn/pen/LYPOmEL

2

You can add an event listener to your burger like this:

const burgerMenu = document.querySelector('.burger');
burger.addEventListener('click', () => {
// here target your navbar and change a class, an attribute or whatever you want
})
3

this looks like a pretty cool tutorial

4

So how would I change the css within that eventListener? I know how to do it with CSS but I guess I don’t know the syntax to do it in javaScript. I understand the code you have there, it’s that last little bit I’m stuck at lol

5

Looks interesting, I’ll check it out

6

For example, If I wanted to set “transform: translateX(0%)” to the “nav-links” tag when the burger is clicked. I have some pseudo code like “If burger is clicked, .nav-links {transform = translatesX(0%)” .

I’m not sure how to translate that to javaScript though or if it’s even possible.

7

I did thisconst burgerMenu = document.querySelector(’.burger’);
burgerMenu.addEventListener(‘click’, () => {
const navlinks = document.querySelector(’.nav-links’);
if(navlinks.style.transform != “translateX(0%)”) {
navlinks.style.transform = “translateX(0%)”;
} else {
navlinks.style.transform = “translateX(100%)”;
}
})

Thanks for the initial syntax!