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?
The group focus is an element that must be shown via workflow, and clicking anywhere outside of it will hide it. Try experimenting with that instead of a regular group for your menu.
The group focus does need a “reference element” so it’ll be positioned relative to that element.
I don’t think Group Focus is exactly what I want. It sounds like it doesn’t support the kind of animation I have, based on your tutorial for a sliding menu.
Here’s what I did:
Create group the full width of the page. It is white and 50% opaque. This is a mask that prevents access to the page elements but responds to a click to close the open menu and hide itself.
The opened menu is pulled in front of the mask so the mask can be full-width on the page.
There are corresponding actions for when the opened and closed menu icons are clicked.
I don’t know if the Group Focus would have worked, but this solution was quick and easy and so far works well. However, I don’t know what problems may crop up with responsiveness. We’ll see.
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.
