How to create a Menu Groups that appears when the user hovers over the menu title

Need help
1

I can create menus boxes that appears when I click on them, but I can’t figure out how to do it by simply hovering the mouse icon…

Please see this quick example video taken from Disney website

2

When you hover over an element, set a custom state. For the menu, observe the value of the custom state for the previous element and set the visibility.

3

Thanks for the response @Scott .

I have created a custom state, and the menu is observing the value of this custom state. The problem is that I cannot find a way to change this custom state on a “hover” command. The workflow does not have a “hover” event. You must click on an element.

Also, the conditional section does not allow to set a custom state from a change in condition.

Have you been able to do it? What am I missing?

4

You are definitely right about that. Setting the custom state in conditions would make it easy to do, if that was an option. I’ll play around with it as it’s possibly something I would want to do in the future.

5

It looks so much better! :wink:

6

The guys at http://airdev.co/ partially have what you want under the “How we work” section. Partially, because as soon as you stop hovering over the element, it reverts back.

7

You are being very generous with “partially”… :smile:

That is the problem with my Menu boxes: As soon as I leave the Menu Title and go into the box, everything disappears!

There are two good solutions in my opinion:

  1. Be able to have a new event for the element called: “An element is hovered”. That way we can create actions based on that, including “set a state”.

  2. But maybe a more interesting one would be to have a new kind of design container. One maybe called: “temporary group”

This group when made visible (now you can set its condition to be visible once another element is hovered), stays visible until you exit the element that made it visible OR until you leave the actual group. That is why the temporary name.

This would allow us to not only make these nice pop-up menus when hovering the menu titles, but also create tooltips that can appear in any field to give more information about it and create pop-up help instructions or information on different areas of the screen.

That do you think @emmanuel?

1 Like
8

Just to clarify on this topic as it has been months!

@emmanuel, is it still not possible to reveal a group on hover rather than on click?

9

Yes no change there

10

Are there plans to implement hover over workflow interactions?

1 Like
11

Not right now, that’s quite dangerous, as it would trigger a ton of workflows.

12

Why not just create a group that is conditionally displayed if you hover over it or over the menu? as in this example:

(see the top right icon and the group called Hover-menu

3 Likes
13

I reveal a group on hover using two conditional statements on the hidden group (The first being: when ‘Profile Button’ (for example) is hovered, Profile Group is visible. Second being: when Profile Group is hovered, Profile Group is visible) – that way the group doesn’t disappear once the cursor moves from the Profile Button to the Profile Group. The trick is the group must overlap or have no space between itself and the button. Extending the group also leaves a little more room for the cursor to move around without the group disappearing. Then I can do that same conditional set-up for menus within the menus. Like this:

https://forum_app.bubbleapps.io/version-test/grouponhover?debug_mode=true

6 Likes
14

Any solutions to making a drop down menu visible on hover in a header menu?
Floating groups can’t have visibility conditions, and using a normal group wouldn’t work well since they would expand the header height.

1 Like
15

This is what I’m running into. I built a reusable header with a floating group menu inside it that appears based on conditions (like when the menu icon is hovered). It works beautifully.

Problem is that when I insert that header onto a page the header’s group invisibly extends down far enough to encompass the entire menu. Any OTHER elements are covered up so that clicks only fall on the header’s group. The dropdown menu is set to collapse when hidden, but that doesn’t change the size of the entire invisible header group.

If I build a separate reusable element for just the menu, taking it outside of the header and allowing the header group to shrink, then I can’t use conditions or custom states.

Am I missing something? Is there not a way to put dropdown-on-hover menus on page headers?

1 Like
16

On the reusable, try forcing its height to only the visible portion by changing the height value.

17

Tried that. The floating group (A) with the reusable header in it is showing 50 height in the UI builder, but in the preview debugger inspector it’s showing 200 height (the fully height of the menu that’s set to collapse when hidden).

18

@emmanuel is there a way to make a floating group and/or a reusable element collapse its height to only the visible elements?

19

For a reusable element, yes, just put it in a group and do it.

For floating group, no, since they’re not part of of the page, but float on the top of it.

21

Okay, so just to confirm,

  • the way to make a header is to put something inside a floating group because the floating group won’t move when the page moves
  • the way to make an expanding menu is to show/hide a group, and it’s possible to make that group collapse when it’s hidden

But there isn’t a way to include an expanding menu inside of a header because the floating group that contains the header can’t collapse when the elements inside it are hidden.

Is that accurate? I want to check my understanding of what the elements can do.