title: How to close responsive bootstrap menu when user touches any part of the screen surface other than the menu?
body: <p>I'm using Bootstrap framework v2.0.1 for my website's design. When the website is browsed on devices like iPad, iPhone, tablets, smart phones, etc. devices(not computers, desktops and laptops) the menu items get collapsed to one icon and get placed at top right corner of the screen. If user clicks on this icon the menu expands, if user wishes he/she can select the desired menu item, the page linked to that menu item opens and the expanded menu gets closed.
  This is the current functionality of my website and it's working absolutely fine.</p>
  
  <p>Now the issue I'm facing is if user clicks on menu icon, opens menu(i.e. menu gets expanded) and now he/she touches anywhere of the surface of the screen except the expanded menu the menu should again get collapse(shrink or close).</p>
  
  <p>How should I achieve this? If you want any more information from my side on this issue please do let me know.</p>
  
  <p>Thanks.</p>