Mega Menu with Hover Effects

[oriol]

Hello! I’m trying to create a mega menu for a WooCommerce store. The idea is to have the top-level categories on the secondary navigation bar and have a dropdown that lists the subcategories on one side and sample products on the other. I’d like the sample products to reflect the subcategory that is being hovered on the menu.
I saw this recent reply to a similar post:

Mega Menu Advice

Hello Chris, Thanks for writing in! Suppose you want to build a Megamenu just like what you have with Ubermenu. In that case, I think, you can combine, the Dropdown element and insert a Navigation menu along with the Slider element. The menu will be the custom navigation for the slider so that every time you hover over an item, the respective slide will display on the right side. https://theme.co/docs/dropdown https://theme.co/docs/navigation-inline https://theme.co/docs/sliders Best Regards…

I’m trying to implement it, but I’m stuck:

1. I created a menu (in WP admin) that includes only the subcategories for the top-level category “Outdoor”
2. Inserted the dropdown.
3. Inserted navigation-inline element.
4. Inserted stacked slider and removed navigation controls.
5. Created a couple of test slides pulling products from a specific subcategory as dynamic content.
6. Made the whole row the context for the slider. Added test navigation to make sure it’s working.

However, I cannot find how to:

1. Activate 'data-x-slide-goto=“X” ’ (or any other custom attribute) on hover/focus instead of on click.
2. Make each individual element from navigation-inline trigger a different data-x-slide-goto=“X” , while keeping their original functionality (linking to the correct page on click).

https://melioravivere.com/header/

Thanks in advance!

[ruenel]

Hello Oriol,

Thanks for writing in!

I am seeing this:

Scrap the Navigation Inline element. Use DIV and Text element to replicate the navigation links where you run the same Looper Provider you have in the slider so that you can add the custom attribute data-x-slide-goto="{n}".

Hope this makes sense.

[oriol]

Hello Ruenel, thanks for your answer. I was trying to achieve what was described in the linked post : https://junipereducation.org/
A drop-down that lists a menu, and as you hover over the menu elements, the pane on the right changes.
The idea would be to show 4 products from the subcategory that is being hovered.

On said post you suggested this:
ruenel
Staff
21d
Hello Chris,

Thanks for writing in! Suppose you want to build a Megamenu just like what you have with Ubermenu. In that case, I think, you can combine, the Dropdown element and insert a Navigation menu along with the Slider element. The menu will be the custom navigation for the slider so that every time you hover over an item, the respective slide will display on the right side.

Dropdown | Themeco Docs

Navigation Inline | Themeco Docs

Sliders | Themeco Docs

Best Regards.

[ruenel]

Hello @Oriol,

You can edit your menu and in the menu item label, you can put something like <span data-x-slide-goto="3">Menu Item 3</span>

If you do not want to do this manually, a Looper that generates your custom menu is also possible.

Best Regards.