Hide Element (container) when click outside (or surrounding)

Ask the community
,
1

Hi

I found no answers from anywhere in Wix communities.

Example:
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-close-dropdown-by-clicking-outside-of-them

  1. If you click “Product”, Dropdown will appear.
  2. If you click outside of the dropdown, Dropdown will disappear.

Can I be able to demonstrate the same behavior in with Wix code?

One Other thing: I will use container box instead of dropbox

Thank you

2

No answers from anywhere? :thinking::face_with_monocle:

For starters you have the submenu option straight from the Wix Editor menu element itself.
https://support.wix.com/en/article/creating-a-subpage-drop-down-menu

You can see examples straight away in the ‘Related Posts’ box on this very forum post.
https://www.wix.com/corvid/forum/community-discussion/solution-close-panel-when-clicking-outside-the-box
https://www.wix.com/corvid/forum/community-discussion/hide-box-when-click-outside

Otherwise, you can make up your own menu bar and then you can make use of OnMouse events and use onMouseIn on the products section to show the container and then onMouseOut on the container itself for it to hide again.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut

You can see more on this here in this Wix Support page.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events

Note that if you go down the code route then onMouse events will not work on mobile device and certain tablet devices, so you will have to use the mobile menu or use the formFactor function from Wix Window API to write code that only happens on certain devices.
https://www.wix.com/corvid/reference/wix-window.html#formFactor

Also note that Wix shows mobile website on Andriod tablets and desktop version on Apple devices like iPad.
https://support.wix.com/en/article/troubleshooting-ipad-and-tablet-live-site-issues

You can also differentiate between types of browser as well to do more, however this would involve the use of html code which Wix won’t support unless it comes from themselves.