How to Create a Hover-Triggered Mega Menu with Dynamic Content

Xtine · 2024-07-23T14:16:07.394Z

Hi everyone,

I’m working on building a mega menu with multiple tabs, utilizing a repeating group based on option sets.

When a tab is hovered over, I want to display the mega menu (using a group focus). This mega menu also consists of a repeating group, and its content should change depending on which tab is being hovered over.

How can I achieve this functionality?

Thanks in advance for any help!
Feel free to let me know if you need any adjustments or additional details.

adamhholmes · 2024-07-23T15:16:55.580Z

Add a GroupFocus to act as your mega menu, inside of which is a RG containing the menu items. (that RG can be populated by an Option set which is related to the Option Set of the Tabs).

Add the Keyboard and Mouse interactions plugin, and use it to show the GroupFocus whenever the appropriate element is hovered.

The menu items can be populated depending on which Tab is being hovered.

Xtine · 2024-07-24T09:31:05.434Z

adamhholmes:

Keyboard and Mouse interactions plugin,

Thanks. I didn’t find any videos demonstrating this. I have installed the plugin. But how do I do it?

adamhholmes · 2024-07-24T09:35:07.100Z

Just add a Workflow event ‘When an element is hovered’ to show the GroupFocus.

Here’s a simple example:

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Xtine · 2024-07-24T12:25:21.421Z

Thank you!! That was awesome.

One more question? How can I keep the Group Focus open when I try to move the mouse inside the group focus to make a choice inside the repating group?

adamhholmes · 2024-07-24T13:27:07.553Z

This simplest way is just to remove the ‘When element stops being hovered’ action. (I’ve adjusted the demo accordingly).

Xtine · 2024-07-24T13:39:00.527Z

Thanks. I will try that.

It looks like I have a bug.

I have set it up exactly like yours - also given everything the same names to try to find the error. However, if I leave Data Source empty on the Repeating Tab Menu Item, nothing appears in Group Focus when I hover.

If I set the data source to All Tab Menu Item, I get all Menu Items instead of only those belonging to the tab.

I have checked all the steps and can’t figure out why.

Skjermbilde 2024-07-24 kl. 15.36.361712×556 58.1 KB

Skjermbilde 2024-07-24 kl. 15.36.471712×556 59.8 KB

Skjermbilde 2024-07-24 kl. 15.37.001712×556 56.9 KB

Skjermbilde 2024-07-24 kl. 15.37.31

Skjermbilde 2024-07-24 kl. 15.38.12

adamhholmes · 2024-07-24T13:39:58.853Z

What does your workflow look like?

Xtine · 2024-07-24T13:49:10.234Z

There it was!! I forgot the filter on display list!

system · 2024-10-01T14:17:02.162Z

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