offCanvasMenu

offCanvasMenu copied to clipboard

I think it would be an enhancement, if clicking on content when menu is open would close the menu. This is the known behavior from Facebook. Currently the only way to close the menu is to click on the trigger again.

Optionally swiping could also close and maybe even open the menu. This is also the behavior known from Facebook.

I think providing options for each of these behaviors would be very nice.

Thanks, @luksak. I agree that this would be a good idea. I think with the current implementation we ran into some finicky behavior, but I've marked this as something worth revisiting.

In the meantime, you can probably achieve this for specific projects using the show() and hide() methods.

True. I will try my luck with the methods.

It's tricky because the only way I've found to test if it is open is with the "open" class, but that gets applied right away. So this code opens the menu then immediately closes it :(.

Is there a better way to test if the menu is open?

    $(document).on('click', '.off-canvas-menu.is-open .inner-wrapper', function(event) {
      event.preventDefault();
      menu.hide();
    });

@timkelty Definitely seems like something we'd want a callback for, doesn't it? Or an event triggered, or something of that sort.

@mattg What do you think?

@timkelty @tylersticka Why not just do this?

$("#menu").on("click", function(e) {
  e.preventDefault();
  menu.hide();
});

@mattg But we want to do the opposite. Click OFF of the nav (.inner-wrapper) to close the nav.

@timkelty I should read a little closer. So, this is ugly, but it works.

$("#content").on("click", function(e) {
  e.preventDefault();
  if (e.target.id !== "menu-trigger") {
    menu.hide();
  }
});

@timkelty This assumes you've wrapped your content in a div and that the menu div is outside that content div.

Right, and for what I'm looking for I'd also need a check against `e.target.id !== "menu", since i only want it to close when you click off the menu.

So yes, that works. Thanks for the example!

I guess I thought there would be an easier way given that seems to be a pretty "expected" functionality.