Close nav overlay when link is clicked (one pager)

user_10719766 0
Viewed 389

On the mobile version of my site, I have a hamburger icon that opens a full-screen overlay when clicked using javascript. The links are anchor links, since it's a one page website. When one of the links is clicked, the overlay remains open when I want the overlay to close.

The problem I believe I am running into is because I have jQuery code set up so there is a smooth scroll effect when one of these links is clicked. This works flawlessly, however the overlay stays open.

So the openNav/closeNav is set up with javascript, and the scroll effect is set up with jQuery. I'm having difficulties figuring out how to go about this.

Here's my HTML:

<div id="mobile-navbar">
    <img class="open-nav" src="img/open-nav.png" onclick="openNav()">
    <a href="#1"><img class="logo-mobile" src="img/logo-mobile.png" alt=""></a>
    <div id="myNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <a href="#1">ABOUT</a>          
            <a href="#2">RIDING AREAS</a>
            <a href="#3">FACILITY</a>
            <a href="#4">PRICING AND SERVICES</a>
            <a href="#5">CONTACT</a>
        </div>
    </div>
</div>

Here's the Javascript (used to open/close the nav):

function menu(x) {
   x.classList.toggle("change");
   }
   function openNav() {
        document.getElementById("myNav").style.height = "100%";
    }
    function closeNav() {
        document.getElementById("myNav").style.height = "0%";
    }

And here's the jQuery (for the smooth scroll):

$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
nav css html jquery javascript
2 Answers

You could add onclick="closeNav();" to all of your links.

Admin1

Ok so i thinks its better you choose to either go with complete js or Jquery only. Combining both is not a good practice as jquery it self takes alot of overhead and so using pure js at some stuff where jquery can be used coud be viewed as injustice to the other half.

For Pure Jquery:

$(document).ready(function(){

  let isOpen = false; //=========> use a flag to toggle navbar

  function navToggle(){
    //Click event for Nav
    $("#myNav").on('click', function(event) {
     if(!isOpen){
       isOpen = !isOpen;
       $(this).css("height", "100%");            
     }else{
       isOpen = !isOpen;
       $(this).css("height", "0%");  
     }
    });
  }


  //Click event for Nav Links
  $("a").on('click', function(event) {
     //Call nav to toggle
     isOpen = true;
     navToggle();

     if (this.hash !== "") {
       event.preventDefault();
       var hash = this.hash;
       $('html, body').animate({
         scrollTop: $(hash).offset().top
       }, 800, function(){
        window.location.hash = hash;
       });
     }
  });
});
user_101782780
Related