Hey there,
I have this show/hide menu(see image below):
How can i make it such that, when user clicks any where on the screen(except the logo and the 3 menus items, those inside the red border boxes), the menu will hide, because currently, the menu can only be opened and i have no idea how to close it 
I don’t know why there is a scrollbar here, am i missed out something?
Here is my public share link: [LINK]
Anyone help? I have been trying whatever way i can but still not works 
You can either assign interaction that will close your menu to the absolutely positioned full screen div inside the full screen menu element, or create a close button and create assign close nav interaction to it.
@dram thanks for your reply but i don’t get you about this >>> assign interaction that will close your menu to the absolutely positioned full screen div inside the full screen menu element
I’m currently applying Mouse Click(Tap), on first click to the hamburger icon only.
When You open the menu by clicking the burger menu you need to create interaction for closing the menu. Here omg the attach clip you can see how did I create interaction for closing the menu - it is happen as soon as I click on the element “full screen menu”. hope it helps 
https://www.loom.com/share/c953c9cca3104220961d116c8b9c2dfd
As Aviv pointed out you need two interactions - one to open your menu, and second to close it. Since you said that you want clicking anywhere but links to close this menu I suggested using an object that would fill the whole space of the opened menu to which you would assign closing interaction so that clicking anywhere but the links will cause menu to close.
@dram @shokoaviv Thank you so much, i can finally get it works. I would like to check if i want to make the “Menu 1, Menu 2, Menu 2” to move down and fade out when the background is clicked?
You will need to set up your close interaction in such a way that first the things you have mentioned happen (links move down, fade out) and only after that your nav will hide.
If you have any specific questions please ask.
Hey @dram, i have tried, the menu can now be hidden with the effect mentioned earlier on, but when i click again the hamburger icon, i can’t open the menu, meaning to say that:
You have to understand how interactions work first. Once modified by interaction an object will stay this way until you modify it again with some other (or the same) interaction.
In your interaction you have moved objects, modified their opacity, modified their display setting. And then you left everything as it is. You need to put things where they were if you want your objects to do the same they did on a first round of interactions.
So for your close nav interaction you have to not only change objects’ opacity to 0 but to move everything where it was, and change their properties to what they were before your open nav interaction took place.
@dram, i have tried to do what you told me, put things where they were and now the problems are:
when i do the first click on hamburger menu, it will show the full screen menu with the 3 menus fade in effect >>> this is good
if i want to hide the full screen menu, i have to click the green area, if i click the red area, nothing happen(see attached image), i’m pretty sure that this is caused by z-index, but i must put the “bgbg” at the lower layer.
when close the full screen menu, i click again the hamburger menu, i don’t see the 3 menus totally.
Don’t hide your menu items. You are already hiding your whole nav, no need to do this for the links themselves. As I said whatever you do to your elements stay this way. So you hide your links with setting their display to none but never show them by setting their display to anything else.
Thanks @dram, i can finally get the show/hide menu interaction works but i have no idea how to fix the clickable area issue, how can i make sure that i can also click the red area to close the menu too?
Set up your menu wrapper like this
and put your bgbg inside it
