Sliding Menu with React -- mode to close

This refers to


which works fine, thanks for it.

One “unusual” thing is how the slider closes. It’s fine closing with selecting one of menu items. But to close the sliding menu without selecting an item requires to mouse click on the slider but not on an menu element. Clicking on the other part of the screen (the non-menu part) will do nothing.
I think that behavior is quiet unusual, what do do you think?
Can you point to a modification so the common method – clicking on the non-slider part – would do the job?

Hi gNeandr! If I understand what you said, you want the menu to close only when clicking on a menu item. Clicking on the big yellow/empty region shouldn’t do anything. Correct? :slight_smile:

No, sorry it should be this way:
– first click on a menu item it initialize the specific op … that’s what it’s for and works
– clicking on the opened slider but not an menu item, currently the slider closes. This is the current mode and I think it’s not the standard / industry known mode
– currently – as I configured it – with a slider only opening with let’s say 50% width clicking on the screen not covered with that 50% slider, there is noop. I would love to see clicking on that screen part would close the slider.

Hope it clarifies the situation.

Ah, yes! That makes sense. You can see that in effect when you resize https://www.kirupa.com/ really small and bring up the menu. Clicking on the non-menu part causes the menu to close. That’s what you are after.

The easiest way to implement that is to have your menu take up the full space like it is currently. Give 50% of your menu a background color with 100% transparency. That can be done by using another div element. This has the effect of your menu looking like it is only 50% big while still ensuring the clicking/dismiss behavior covers the full screen while the menu is displayed. Let me know if you would like me to create a sample for that.

Regarding the behavior when you click on an empty part of the menu, I’ve seen both the current behavior and the behavior where it doesn’t dismiss the menu when you click on an empty region. I actually don’t know what the industry standard is for that :stuck_out_tongue:

Hi Kirupa,
your help with …

… would be great!
I tried to code it but struggled to add an element right to the 50vw-Slider which would be sensitive for ‘close-the-slider’.
Also making the background directly click-sensible so it would act as the ‘close-the-slider’ failed.
Looking forward for your solution. Thanks for helping :wink:

Did I missed your help for this? I understood yr question for help you would show how to code the other method to close the menu. Maybe you can point me to the missing piece. Thanks

Sorry for the delay on this. I’ve been busy with a bunch of other commitments, so I haven’t had a chance to look into this. I’ll do my best to look at this again in the next couple of days :slight_smile: