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

[Xtine]

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]

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]

@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]

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

Here’s a simple example:

Bubble - Visual Programming

[Xtine]

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]

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

[Xtine]

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.

[adamhholmes]

What does your workflow look like?

[Xtine]

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