-
Ehy there dear team,
I’m trying to build a mega menu similar to the one I’ve shared in the private info.
I dealt with a similar concept in another post with Ying: https://generate.support/topic/tab-but-content-displayed-on-hover/
In that case, however, with the JS script (which works perfectly), we were talking about the tabs block.
With a menu, how can I achieve a similar effect? Obviously, I can’t create it with the tabs block due to semantic/accessibility reasons.
Do you happen to already have a code solution you’ve worked on? Or maybe some guidance on how to do it?
-
Hi there,
You can try the new overlay feature of GB Pro.
https://learn.generatepress.com/blocks/block-guide/mega-menu-overlay-panel/But the example site is using an overlay for the entire menu, not a submenu, so I think this popup & modal overlay is more suitable for the job:
https://learn.generatepress.com/blocks/block-guide/pop-ups-modals/However, you will need to add all the accessibility related attributes. As it’s not a menu.
-
Hi Ying, do you mean something like this: set up two columns. On the left, use a container with a <nav> tag, and inside it list the items using the appropriate accessibility tags for a menu. And for each item, create an overlay that appears on the right?
I’m trying, but it’s a bit tricky because it’s hard to keep the image on the right always in the same position, and the overlay doesn’t seem to detach when the hover is removed.
-
Hi there,
That looks like something that would require custom development. Since the Tabs method isn’t an option, the next feasible approach would be to use Container blocks with custom JavaScript to replicate tab behavior — though that’s a bit complex and outside our support scope.
-
I figured, thanks Alvind!
-
No problem! 🙂
- You must be logged in to reply to this topic.