Hamburger toggle menu for one page site

Question

I am developing a super simple site using jQuery and bootstrap libraries but I would like the menu items to jump to the section (already done with anchors). But when I navigate back to the top the menu dropdown is still open. How would I setup up a toggle so it closes on clicking a menu item?

This is my initial code:

$( document ).ready(function() {
  $( ".cross" ).hide();
  $( ".menu" ).hide();
  $( ".hamburger" ).click(function() {
    $( ".menu" ).slideToggle( "slow", function() {
      $( ".hamburger" ).hide();
      $( ".cross" ).show();
    });
  });
  $( ".cross" ).click(function() {
    $( ".menu" ).slideToggle( "slow", function() {
      $( ".cross" ).hide();
      $( ".hamburger" ).show();
    });
  });
});



<button class="hamburger">&#9776;</button>
<button class="cross">&#735;</button>

<div class="menu">
<ul>
<a href="#"><li>Home</li></a>
<a href="#about"><li>Jeff Anderson</li></a>
<a href="#"><li>Hand Built Frames</li></a>
<a href="#"><li>Bike Repairs and Maintenance</li></a>
<a href="#"><li>Frames and Accessories</li></a>
  <a href="#"><li>Contact</li></a>
</ul>
</div>
</div>

Any help greatly appreciated. Thanks.

Possible duplicate of [Click outside menu to close in jquery](https://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery) — Salomon Zhang, Dec 04 '17 at 22:54
what are .cross .menu .hamburger? Can you show your html code as well? Just edit your question. No need to be another post. — Salomon Zhang, Dec 05 '17 at 00:37

score 0 · Answer 1 · answered Dec 04 '17 at 22:53

Anything that gets to the document will hide the dropdown

$(document).click(function(){
  $("#dropdown").hide();
});

Clicks within the dropdown won't make it past the dropdown itself

$("#dropdown").click(function(e){
  e.stopPropagation();
});

I believe adding these code will solve your problem.

Hamburger toggle menu for one page site

1 Answers1