How do I close a Hamburger Menu once an Item is clicked?

Question

Having trouble closing the Menu after clicking the hamburger button. What's the best way to close the entire menu screen once any of the items are clicked?

My HTML is:

`<body>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">>
      <div>
        <div>
          <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>`

I've tried using jQuery but havent had success. Here's the js code:

`$('.toggler').on('click', function () {
    $('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
    $('.menu-wrap').toggleClass('open');
});`

Or if there's a simpler way using CSS to close the menu?

Here's the codepen to run: https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5

Here's the jsfiddle @Çağrı https://jsfiddle.net/wqg0zpr8/#&togetherjs=JlSyLJtclH Didn't add the javascript to it. I'm not sure if my css is conflicting with it. — ladiesman217, Apr 12 '20 at 02:37
@adiesman217 now i understood what you mean in fiddle and updated my answer. u can check it — mr. pc_coder, Apr 12 '20 at 08:49

mr. pc_coder · Accepted Answer · 2020-04-12T08:46:44.203

https://jsfiddle.net/h7et0qnv/

this menu style work on input chechbox situation. If checked your hamburger menu get visible else get hidden . so just need to change its situation

wrote one function in your script.

function toggle(){
    $(".toggler").prop("checked", false);
}

then put this function to onclick event of menu list

<li><a onclick="toggle()" href="#Home">Home</a></li>
 <li><a onclick="toggle()" href="#About">About</a></li>
 <li><a onclick="toggle()" href="#">Menu</a></li>
 <li><a onclick="toggle()" href="#">Contact</a></li>

Vivek Roy · Answer 2 · 2020-04-12T06:31:11.733

If you want to do it with vanilla js, I would suggest you to use CustomEvents. There might be other ways of doing it in frameworks like React.

For every menu item I would emit a custom event -

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

The 'menu' can then react to this custom event and close itself if open -

var menu = document.querySelector('.menu')
if (menu) {
  menu.addEventListener('closeMenu', function (e) {
    e.currentTarget.classList.remove('open');
  });
}

You can have the usual menu 'toggler' for opening and closing the menu when it is clicked.

Update:

I figured things were not very clear. So here I am adding some sample code. Note: I added the toggler and subsequently changed the menu eventHandler slightly.

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

var menu = document.querySelector('.menu')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
  menu.addEventListener('closeMenu', function(e) {
    menu.classList.remove('open');
    toggler.checked = false;
  });
  toggler.addEventListener('click', function(e) {
    menu.classList.toggle('open');
  });
}

.menu {
  background-color: white;
  display: inline-block;
  padding-right: 1rem;
}

.menu.open {
  visibility: visible;
}

.menu {
  visibility: hidden;
}

<div class="menu-wrap">
  <input type="checkbox" class="toggler" checked>
  <div class="hamburger">
    <div></div>
  </div>
  <div class="menu open">
    <div>
      <div>
        <ul>
          <li><a href="#Home">Home</a></li>
          <li><a href="#About">About</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

I've tried using your code and it's still not working. I believe my CSS might be conflicting it. Would you mind checking my code: https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5 — ladiesman217, Apr 12 '20 at 02:41
@ladiesman217 I updated my answer above with code snippets. Hope that helps reproduce the results. — Vivek Roy, Apr 12 '20 at 06:25

How do I close a Hamburger Menu once an Item is clicked?

2 Answers2

Update: