Kevin Powell - Community•16mo ago

Question regarding creating nav

Hello guys, can you guys explain to me how to make a toggle button, click it once to open and for the second time to close, although I saw it how it was done I never really understood it. Thanks

13 Replies

ᴋʙ•16mo ago

Using javascript it would look something like this:

let nav = document.querySelector("nav");
let navigationButton = document.querySelector("#navigation_button");

homeButton.addEventListener('click', () => {
  nav.classList.toggle("visible");
});

let nav = document.querySelector("nav");
let navigationButton = document.querySelector("#navigation_button");

homeButton.addEventListener('click', () => {
  nav.classList.toggle("visible");
});

            <nav>
                <div>
                    <img id="navigation_button" src="image">
                </div>
            </nav>

            <nav>
                <div>
                    <img id="navigation_button" src="image">
                </div>
            </nav>

            <nav class="visible">
                <div>
                    <img id="navigation_button" src="image">
                </div>
            </nav>

            <nav class="visible">
                <div>
                    <img id="navigation_button" src="image">
                </div>
            </nav>

clicking on the image with the id navigation_button would toggle a class called visible on the nav element. imma just explain the javascript in case you dont know how it works.

let nav = document.querySelector("nav");

let nav = document.querySelector("nav");

This code creates a variable called nav and the value of nav, is the element <nav> </nav> (And the way you find the "element" is by using the queryselector. document.queryselector basically searches for the element you put inside the double quotes.)

let navigationButton = document.querySelector("#navigation_button");

let navigationButton = document.querySelector("#navigation_button");

This code creates a variable called navigationButton and the value of navigationButton, is the element <img> (Same here queryselector "searches" for the id called navigation_button)

Adhurim GashiOP•16mo ago

Thank you so much @karlbendik I do know some JavaScript, but some extra explaining never hurts! Thank you again for going in depth about my question, you truly were a big help!

ᴋʙ•16mo ago

homeButton.addEventListener('click', () => {
  nav.classList.toggle("visible");
});

homeButton.addEventListener('click', () => {
  nav.classList.toggle("visible");
});

.addEventListener is does kind of the same as queryselector but it constantly listens for what you put in the quotes, in this case it is listening for a 'click' And we kind of place the listener on the homebutton by doing: homeButton.addEventlistener() after the variable. the addeventlistener function has 2 values in this code: .addEventListener ('click', functionNameHere) some people prefer using a function instead of the arrow-function after the comma i recommend you use google or chatGPT to find out exactly what an arrow-function is after the ('click',) we have the () => {} this () is basically the argument passed to the function you can in fact replace the () with any text or whatever you want, people usually replace it with the character e so it would be ('click', e => {}); and also ('click', (e) => {}); but since i dont use the argument e in the code we dont need it, and thats why i chose the argumentname () as it is the smallest way to create the arrow-function Its basically the same as the parentheses in this normal function

function functionNameHere()
function functionNameHere(e)
() => {}
(e) => {}

function functionNameHere()
function functionNameHere(e)
() => {}
(e) => {}

anyways

homeButton.addEventListener('click', () => {
  nav.classList.toggle("visible");
});

homeButton.addEventListener('click', () => {
  nav.classList.toggle("visible");
});

The addEventListener just runs the code inside the curly brackets {} any time it "hears" a 'click' And in this case what it does is that it toggles the class "visible" on the navigation element @s2k_off was that understandable? Just ask away if you need further clarification, im happy to help. also remember to use google and chatGPT a lot if you are stuck 👍

ᴋʙ•16mo ago

Here is a pen that shows what the code does: https://codepen.io/KB04/pen/bGOBrGe

CodePen

bGOBrGe

...

Adhurim GashiOP•16mo ago

thank you yes it was @karlbendik Your example kind of confuses me to be honest, do you mind making it more practical maybe have an hamburger menu button and just a few nav links, that would be life saving!

ᴋʙ•16mo ago

sure

ᴋʙ•16mo ago

ᴋʙ•16mo ago

this example was just to show that when you add the eventListener on green it will listen to green being clicked. and when you toggle the class on yellow it will change the class of yellow even though it is inside of the green event listener so the code inside the event listener does not need to change the green square. meaning i am selecting one thing to listen for clicks and by clicking on that thing it will change something else that i havent clicked on this might show it better:

ᴋʙ•16mo ago

https://codepen.io/KB04/pen/bGOBrGe

CodePen

bGOBrGe

...

ᴋʙ•16mo ago

Here is another one with Just one div: https://codepen.io/KB04/pen/PoXbLdr

CodePen

Another Toggle Button JS Example

...

ᴋʙ•16mo ago

This is some code i made in school a while a go its more of a real world example probably But as you can see i use exactly the same code