I have implemented a simple menu that slides in from the left when a menu icon is clicked in the header. Here’s a piece of the open menu:
On page load, the menu is hidden. When the menu is open, clicking its menu icon causes the menu to slide left, out of sight. (I assume this means it is transitioned back to being hidden but I’m not certain.)
My problem is that when the menu is open, I want it to close when the user clicks anywhere outside the menu group. In fact, when the menu is open, only covering part of the left side of the app window, I want all elements other than the menu to be disabled. Then, if the user clicks anywhere in the app other than in the menu, trigger the menu icon clicked event to close the menu.
In a sense, I want the menu to behave somewhat like a popup group.
Is there such a thing as a click-away event and a way to protect all visible elements while the menu is open?
Click a menu item to take an action
Normally go to another page.
Upon return, the menu is closed.
If user decides to not select an action from the menu,
click somewhere to close the menu. This is either an icon in the menu group or anyplace outside the menu.
The result is that the menu closes and user can continue to work on the current page.
The only other option I could think of If you really don’t want to use the menu that bubble has or the focus group is to add a large invisible group that covers the whole screen where the menu is inside of. Then maybe on click of the large invisible group the menu can hide. Definitely not what I would normally do but just throwing it out there.