How to show andhide the navigation when the menu clicks.

Question

Help me with m ystudy thank you.

https://code.sololearn.com/WnI2udXZFeRU/?ref=app

Answer 1

You made two copies of toggleMenu() function. The last function defined by same name will be assumed as the one to be used. That's why the links toggle visibility but the hamburger animation doesn't work - because the animation is triggered in the first definition of toggleMenu().

Solution - Merge the functions

function toggleMenu()
{
let x = document.querySelector(".header__hamburger");
x.classList.toggle("click");

x = document.querySelector(".links");
if (x.style.display === "none")
{
x.style.display = "block";
}
else
{
x.style.display = "none";
}
}

P.S. You might want to make the hamburger stay on the same spot just by setting up its 'top' in the respective CSS. Without this, the hamburger jumps up or down as it is clicked : )

Answer 2

Give the <ul> an id

Create a CSS class which renders the selector invisible

.invisible
{
display : none;
}

Apply it for the <ul> so it becomes hidden from the beginning

<ul class="invisible">

Inside toggleMenu(), use JS to toggle .invisible class in the classList of the <ul>

Answer 3

https://code.sololearn.com/WnI2udXZFeRU/?ref=app

Help me more sir thank you.

I updated my code but the effect to change menu to X is gone whenever I click

Answer 4

Thank you sir..