Megamenu with links that change out on hover

[southwestweddingcollective]

Hello! I am trying to build out a megamenu for this site using Pro, and could use some help to point me in the right direction. The megamenu is based on several dropdowns. On the left side of the dropdown, there is a standard link menu. On the right, there is a row with three columns, with an image/text link in each column. Currently, the image/link columns are static. However, we’d like for the images and links to swap out depending on which link in the left side of the dropdown has been hovered over. Is this possible in Pro? See attached screenshot for reference.

[ruenel]

Hello Anne,

Thanks for writing in!

Yes, that layout is possible. You will have to make use of a Dropdown, Buttons, and a Slider element. Potential element structure would be:

Dropdown
  Row 
    Column {LEFT}
       Buttons

   Columns {RIGHT}
       Slider
          Headline
             Row
                 Column 1
                     Your Image
                 Column 2
                     Your Image
                 Column 3
                     Your Image

In each of the button elements, you will add a custom attribute data-x-slide-goto with the value of the corresponding Slide that has the images.

I highly recommend that you check out this video tutorial to know more about the Slider Triggers:
https://www.youtube.com/watch?v=do45n9xMUVo

Kindly let us know how it goes.

[southwestweddingcollective]

Ok understood! Currently the menu on the left is being handled by a navigation inline element, so I’ll need to swap it to individual buttons instead?

[southwestweddingcollective]

Does this method trigger the slider interaction on hover, or on click? I still need the menu items on the left to click through to the pages currently linked, in addition to the hover behavior.

[ruenel]

Hello Anne,

With the Looper Provider Menu (https://theme.co/docs/loopers#menus), using the buttons can be set up easily.

And to trigger the slider upon hover, you can use the data-x-slide-goto-trigger custom attribute in the button. Check out this documentation here: https://theme.co/docs/sliders#custom-attributes

Hope this makes sense.