CODEWITHSUNDEEP
javascripthtmlcssnav
Paul Hinnrichs
Paul Hinnrichs

Reputation: 1

How do I get my Nav menu to dissapear after I click one of the links?

this is my first time asking a question here so forgive me if it's confusing. I did an online tutorial on youtube from DevEd where he shows you how to code a responsive animated nav bar. The original video can be found here...

https://www.youtube.com/watch?v=gXkqy0b4M5g&list=PLbt4Kgx40Ie0bXokczYmcdxLD_KvYDXv9&index=5&t=101s&ab_channel=DevEd

What I want to know is how you alter the js so that the nav menu dissapears when you click on a link as well as when the burger button is clicked. Here's the HTML...

<body>
    <nav>
        <div class="logo">
            <h4>The Nav</h4>
        </div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>

    <script src="app.js"></script>
</body>

and here's the js...

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
//toggle nav
    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active'); 

//animate links
    navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;

            }
        });
//burger animation
    burger.classList.toggle('toggle');
    
    }); 

}

navSlide();

I'm a relative newbie at this so please go easy. Thanks in advance!

Upvotes: 0

Views: 47

Answers (2)

Paul Hinnrichs
Paul Hinnrichs

Reputation: 1

After a little digging I found a similar problem and here's the solution:

  const closeNav = () => {
    nav.classList.toggle('nav-active');
    burger.classList.toggle('toggle');
  }
  navLinks.forEach(link => link.addEventListener('click', closeNav));
}

added to ajvascript just after burger.classList.toggle('toggle'); });

Upvotes: 0

Atharva Sharma
Atharva Sharma

Reputation: 315

Go to the point in function where you want to hide the navbar and do:

document.getElementsByTagName("nav")[0].style.display = "none";

Upvotes: 1

Related Questions