Close off-canvas menu on window click

Question

I made this "slide-out" menu: SASS Slide-out Menu.
It's ok, but I want that when the menu have slid, on window click the menu returns back(remove the class "nav-open").
I tried this on the codepen demo, but it doesn't work:

window.on("click", function(e) {
    if(wrapper.hasClass("nav-open") && e.target != nav && e.target.parent() != nav) {
        wrapper.removeClass("nav-open");
    }
});

score 2 · Accepted Answer · answered Aug 21 '14 at 13:11

You're close! I think your codepen example needs the close logic block tweaking to look like this:

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

Some tips for you:

Use $(window).on not window.on
e.target is a DOM element, so you need to wrap it in jQuery like $(e.target)
You can compare DOM elements, but not jQuery objects, so you can use hasClass instead
I added a check to ignore a click on the toggle itself

Forked codepen with working code: http://codepen.io/anon/pen/mzAru

Thanks! any ideas to make the transition of the "fa" classes in the menu animated? — rick_zan, Aug 21 '14 at 16:00

Close off-canvas menu on window click

1 Answers1

Linked