1

here's my codepen http://codepen.io/anon/pen/GZWPrj

I know it's been answered few times, but it's too difficult for me to translate it to my code.

So I have a second off-canvas menu which is working as intended.

One thing I want to add is the ability to close this menu, by clicking anywhere outside the off-canvas menu - so clicking inside the canvas.

I found a good working example like

$(window).on("click", function(e) {
    if (
      $(".wrapper").hasClass("nav-open") && 
      !$(e.target).parents(".side-nav").hasClass("side-nav") && 
      !$(e.target).hasClass("toggle")
    ) {
        $(".wrapper").removeClass("nav-open");
      }
  });

here Close off-canvas menu on window click but I'm too dumb to figure out how to implement it to my version of code.

Community
  • 1
  • 1
Seb
  • 113
  • 1
  • 4
  • 12

1 Answers1

1

Your html structure is different to the linked example. Below is some code that will work for your example:

$(window).on("click", function(e) {
  if (!$(e.target).hasClass('menu-link') && !$(e.target).closest('.nav-stacked').hasClass('active')) {
    //Revert the menu
    $('#menu').removeClass('active');
    //Revert the main content
    $('.container').removeClass('active');
  }
});

Updated Codepen

Yass
  • 2,658
  • 3
  • 13
  • 21
  • thank you for quick reply. It's almost perfect. I updated the codepen with some content. As you can see when I click inside canvas to close the menu, navbar moves back as it should, but everything else (in .container) stays and doesn't move. [http://codepen.io/anon/pen/JXWwBo](http://codepen.io/anon/pen/JXWwBo) – Seb Mar 21 '16 at 22:39