单击某个链接后关闭汉堡菜单

Question

I have some burger menu made with html and CSS with some links in it. That works fine. However, when I click on some link the menu won't close. I tried some JavaScript examples, but it didn't work.

I'm really bad at JavaScript and need help with this. The point is I need the menu closes when user click on any link. Thanks!

<div class="menu-wrap">
  <input type="checkbox" class="toggler" />
  <div class="hamburger"><div></div></div>
  <div class="menu">
    <div>
      <img class="logo" src="assets/logo_white.svg" />
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#cards">SERVICES</a></li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
        <div class="social">
          <ul>
            <li>
              <a href="#"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-twitter"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-instagram"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </li>
          </ul>
        </div>
      </div>
  </div>
</div>

Answer 1

So I assume you are having a single page application without page reloads. You could close your sidebar every time a user clicks any link. If you are using jQuery:

$(document).ready(function(){
    $("a").click(function(){
        $(".menu").hide(); 
    }); 
}); 

Or if you would like to use vanilla JS:

var els = document.querySelectorAll('a');

for( var i=els.length; i--; ) {
  els[i].addEventListener( 'click', function(){
     // close your menu here
     document.getElementById('menu').style.display = 'none';
  );
}

If you are already using jQuery, stick with it. If not, go for the vanilla version.