I struggled with this for a few hours, so figured I’d give a simple run down of the steps involved to get it working, especially as a menu.
My approach is to give a user a set of choices (based on a category) that when the category is hovered, a group focus will open with more choices (sub categories). Also important is when a different category is hovered it’s subcategories would become visible.
Another important point is that when no category is hovered, the last hovered category’s subcategories would still remain visible.
Those three little empty boxes are the “group invisible” elements with a outline for visualization purposes only. In reality these should have no border and be invisible.
These “group invisible” elements are where I have set my conditions.
The Group Hover is the red squares on the page. For my actual use case, these Group Hovers are set in another group focus that is first displayed on a button click (not seen in this post).
You could set the group hovers in other group focus if you have multiple subcategories ( ie: clothes - mens clothes - pants - pleated - black )
Thank you @boston85719. This is a fantastic solution! I would never have figured out the “Every Time” nuance.
Building into my app now for new users to hover features to see additional details on the feature.
No worries. This is also good for showing an image on hover, like when a product page has multiple thumbnails with one main large image. User can hover the thumbnail and have that image show up in the larger image without needing to press.
Thanks for the content. I agree with benjamin, why is bubble making it so hard to build a normal menu, and other normal things. (global variables, loops…)
“loops are done with backend recurring workflows”
I’ well aware of that, thanks. I use plenty of them on my site. My point is that many things which are standard logic require specific workflows built for those purposes. Loops for example shouldn’t need to be an extra internal service/backend, but a normal part of the logic in any workflow. Or would you consider creating something akin to an internal API just to run a loop as performant? Maybe if the page isn’t’ so complex, but once you have several layers of complexity, each “this is how it’s done in bubble” adds up.
When it comes to global variables I earlier searched for solutions for having a varible that keep tracks of things such as customer number, or order number. I do use a “bubble solution” and I’ve seen how others have solved it by using backend flows etc, but that again requires more work-around then if done programmatically. Bubble is great for many things, but then there are some basics which just isn’t there and needs to be done in nested ways, which slows down the performance even more.
This is the discussion and solution I use for global variables: Global variables in Bubble? It’s “easy” but still workaround as compared to just having a global variable. Instead a custom data-set, a search function, and a back-end workflow is required. For a variable.
I think as Bubble is built to be no-code, programmatically achieved concepts are not really built into the core of Bubble features, but perhaps you can add your idea to the list of ideas that users often submit to help Bubble improve their product for their users.
It is built to be no-code, just needs to be able to capture the core logic to make it as powerful as actual code. Just think there is some logic which is super-fundamental and shouldn’t require extra workflows.
I think it got like 80% of all the logic, at least that I need, and then the extra 20% requires either workarounds, or plugins, or javascript, and maybe 5% that I haven’t manage to get to solve at all within bubble even with those.
Blockquotebut perhaps you can add your idea to the list of ideas that users often submit to help Bubble improve their product for their users
Yup. I have an internal document where I write down things as I develop that I’ll send in, which I think would make it more awesome, just my 5 cents of course. Want to let some of the things boil so it’s just not me not figured out how to “bubble it”.
I struggled with this for hours too - and just when I decided to give up and google it, I found no one else but my first bubble mentor to walk me through it.
How do you plan to hide it? If by clicking an element, then it would be the workflow action element actions hide and hide the groupfocus.
If you want to do it from the same element, then set a condition on the trigger for when the groupfocus is visible ‘hide group focus’ and other trigger with condition for when the groupfocus isn’t visible ‘show group focus’.
The problem with triggering an event when an element is/isn’t hovered is that the groupfocus gets stuck. It would be much better to just use the conditionals that are attached to the groupfocus, but the visibility checkbox doesn’t exist
