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

Yes no change there

Are there plans to implement hover over workflow interactions?

1 Like

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

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

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

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

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

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

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).

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

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.

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.

I think that’s accurate but as I said once, experimenting is the best way to do it i think.

I’m a little at a loss as well. Can’t figure out how to hover or click over an element or group in the header(which is a floating group) and make a navigation menu appear(from inside the header or out) as a result. Sort of like bubble home header, where you click on your email and options appear below it.

Awesome :sunny: ur Vegas : @vega.andrew Andrew

Bubble@hack

2 Likes

Any update on this? I don’t find a proper way to do it

1 Like

Any update on this? Seems like one of the most basic functionalities of any website

Mouse hovered were just made possible!

2 Likes

thanks!!

Andrew, can you share more about how this was built? Thanks