I have quite a few menus now in my prototype. Currently, I have to add an action for each menu to each other clickable area to avoid that two menus can be opened at the same time. I have done it for the rest of the canvas by adding an action to the Home container but this is ignored if I click on a clickable area. Am I missing something or is there no action for “Click outside of”?
as you mentioned earlier, you have to add an action to each element that should behave like this.
If you know this in advance, you can create your widget in a way that makes it easier to use.
In case you need this functionality for the same type of widget, I have attached an
InteractionExample.zip (366.6 KB).
In the example I am using a visible in viewport action on the Dropdown Content element.
First I will change the state for all other Dropdown Content widgets to hidden.
Since my current widget is now also hidden, I have to change the status again.
Since my example is a bit more complex, I have to do the same for some other widgets as well.
Just like you, I have a click action on the screen that hides all dropdown content widgets.
Does this help you? Just let me know if you need a simpler example.
Elegant and simple. Interesting to note that actions are worked through in the order they appear. Seems logical, really but I didn’t think it worked that way. THANKS!
Changed all my widgets now to this system. Works very well. There is one more thing I wonder about, maybe someone knows:
- With the system as described above, Is it possible to change the state back to hidden if I click on the menu again? I tried toggle but that stopped the menu form opening altogether.
So I click on the button, the popup menu opens. I click on another button, this menu closes. But can it close also, if I click on its own button? That would be the standard behaviour of an action menu or similar UI elements. No biggie, just one of the many details…
Hmm, if I get it right, it works in Dominic’s example. He uses the toggle action to open/close the menu when clicking the triangle.
Ah. Yes it does indeed. I didn’t look there. Got it. Sorry about the traffic.
…and got it to work. After trying for a solid hour. What was I doing wrong? My state “Hidden” was achieved by setting the menu to “Hidden”. That didn’t hide the menus if I clicked on another menu-button. Once I had set it to “Collapsed” it worked. I understand that there is a difference. “Hidden” still takes up space and gets in the way of clicks to objects with a lower z etc. But why does it interfere with the state? shouldn’t it work just the same?
The problem is, that a hidden element is still visible in viewport. Only with visibility: collapsed, the visible in viewport action is triggered.