Mobile Menu - Click outside menu to close menu

Question

I have that button in my mobile website; the problem is, that I need to add a method that when the user clicks or taps outside the menu the menu closes.

Can someone direct me please?

Answer 1

Fiddle Link : http://jsfiddle.net/eAGjM/

You'll need to check if the clicked portion is neither the Menu nor its child element. If your menu contains child element then this check is required otherwise clicking on sub elements will also hide the menu.

$(document).mouseup(function(e){
   var menu = $('selector');
   if (!menu.is(e.target) // The target of the click isn't the container.
   && menu.has(e.target).length === 0) // Nor a child element of the container
   {
      menu.hide();
   }
});

Answer 2

You can do something like below to hide/close the menu

$(document).click(function(){
 $(your class/id).hide('slow'); 
});

Here is Fiddle

Instead of menu i have just shown a simple example for click