How to make an element close when 'hovered outside the element'

Need help
1

Hi!

I have created a dropdown menu which shows when the profile icon is clicked.

Now, I want this dropdown to vanish when the person clicks outside.

Right now when the profile icon is clicked, the dropdown menu shows. In order to close the dropdown menu, the person has to again click the profile icon. This is creating an annoyance in UX.

image

The action I want to achieve is very similar to the one used by bubble forum when you click the profile icon

How to go about this?

2

Curious to see how anyone else fixed it.

I fixed it by adding “hide” when clicking the group outside (outside i mean by clicking the group that contains the whole page) with a condition, only if element is opened. I then added CSS to show the default icon and not the hand.

Hope that helps.

3

I have made this drop down menu using a repeatable group. So I am not getting the option to add conditions:

image
image782Ă—842 56.7 KB

4

Go to Workflow, choose “An element is clicked” select the element (eg. Group page content). Then add an action, element actions, hide, choose the repeating group as the element you want to hide and Only when repeating group is visible.

You then need to add the plugin Classify and add the style cursor:pointer!important; to the RG so that you don’t see the hand when you move your mouse around the rest of the screen.

3 Likes
5

If you use Group Focus, the element will automatically close when user clicks outside.

1 Like
6

Can you show me how to do that using group focus? This seems easier for now as I can change from floating group to group focus. I have never used this element before. Any relevant tutorial (Youtube or something like that) would also do!

7

Its quite simple really. Give this a whirl:

  1. Grab a group focus from the element navigator and plop it on the page. It doesn’t matter where you plop it cos it will automatically replop itself into the top left corner.
  2. Once the GF has self plopped, insert the name of the element you want to use as a reference into the reference field. Watch as it replops itself again, but this time to right below your ref element.
  3. Once you have done that you can nicely resize the GF and position it using the top and left offsets.
  4. Add a workflow event on clicking of your reference element to toggle the GF.

At this point you have a highly user friendly drop down menu that disappears when a user clicks away. Just add your text elements / images / icons etc to provide the user navigation options.

1 Like
8

Yep, the reason I did not mention group focus is because the behaviour on mobile is dreadful. Had to stop using it. On IO’s its even worse. For me having a mobile responsive web app that works well is very important. But if mobile is not important to you group focus is the way to go. Although would be very difficult to understand in todays age why your website is not responsive.

1 Like
9

Ooh, great call out @mangooly. My work is solely for web app, so that is a good warning for @harshala.

1 Like
10

Have a group that is not visible until the drop down is visible. This group should have no background, so it is transparent. It should fill your entire page and be on top of all elements but underneath the drop down element.

Then set workflow for when that transparent group is clicked to close your drop down.

You can do some version of that.

If you want you can use Z-index to help with positioning the elements on top of one another.

3 Likes
11

Good one @boston85719. I hadn’t thought of that approach prior.

1 Like
12

This topic was automatically closed after 70 days. New replies are no longer allowed.