0

I have hamburger menu which works great, but I want to add some funtion, which will hide menu when user clicks OUTSIDE the whole hamburger menu.

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

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

$(".clickham").click(function() {
  $(".mobilemenu").slideToggle("slow", function() {
    $(".cross").hide();
    $(".hamburger").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
</header>
<div class="mobilemenu">
  <ul>
    <a href="#" class="clickham">
      <li>Test</li>
    </a>
    <a href="#" class="clickham">
      <li>Test2</li>
    </a>
  </ul>
</div>

http://jsfiddle.net/71hdnctp/

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Dawid
  • 83
  • 1
  • 9
  • $(document).click..... – Álvaro Touzón Oct 26 '17 at 09:45
  • I am added this: $(document).click(function() { $( ".mobilemenu" ).slideToggle( "slow", function() { $( ".cross" ).hide(); $( ".hamburger" ).show(); }); }); $(".mobilemenu").click(function(e) { e.stopPropagation(); return false; }); $("header").click(function(e) { e.stopPropagation(); return false; }); But when hamburger menu is closed, then click anywhere opens menu. – Dawid Oct 26 '17 at 09:52
  • Okay, I have good code: $(document).click(function() { $( ".mobilemenu" ).hide(function() { $( ".cross" ).hide(); $( ".hamburger" ).show(); }); }); $(".mobilemenu").click(function(e) { e.stopPropagation(); return false; }); $("header").click(function(e) { e.stopPropagation(); return false; }); But how to have the slideToggle animation and combine this with function .hide? – Dawid Oct 26 '17 at 09:58

0 Answers0