How to create submenu that appears "While Hovering"

Instead of “While hovering”, use the “Mouse enter” and “Mouse leave” triggers.

Have you ever set up a prototype with a menu system like this that works? “Mouse enter” on the top menu items allows the submenu to open and stay open so submenu items can be clicked. The issue is how to handle closing the submenu in the following cases

1. When the user moves the mouse to another top menu item (Access Data, Visualize, etc) a different submenu needs to be displayed.

2. When the user moves the mouse off any of the submenus but not onto a top menu item, no submenu should be showing.

I have experimented with several iteration of my interactive component and It doesn’t seem possible to create a normal interaction that users would expect. I set up “Mouse Enter” events for the top menu items to display the variants with submenus open, but Figma does not allow me to set up a “Mouse leave” “Change to” on the submenu elements to return to the default variant. Maybe this is a bug in Figma. I can chose the variant from the list but the value just reverts to the currently selected variant.

Thank you for taking the time to demonstrate that it can be done. I have attempted to apply this method to my site mockup but I am having a few issues. I can get the submenu variants to display when I “Mouse enter” the top items, but if you don’t move to the submenu element fast enough the hover and default state “pulses”. The only difference I can see between my prototype and yours is that my submenus are instances of master components.

Also there is a bug in Figma which prevents me from linking some of the top items in the variants to the variant that has the appropriate submenu (using
Menu enter > change to"). It doesn’t allow me to select the variant… it just reverts back to itself.

You can try it here

Thanks!

This is possible to obtain using Interactive components for the list item and is pretty cool. (You’ll have to use 0px hack).

This means that is reusable.

I’ll try to find some time to prepare a shareable example. ✌️

I’ve edited the “Site Header - Simple Mega Menu 2” component.

Design file:

I see you put the top navigation and the menu in a frame. Maybe this is what eliminates the flickering. Is there some reason why Figma needs it to be this way?

OK, So rather than just copying your interactive component into my Figma project, I recreated what you did and still have the same issue. I grouped my top menu and sub menus into frames and moved the frame layer higher in the variants … they still flicker… and I still cannot set up some of the top menu to “Mouse enter > Change to: Find Data”. It just resets to itself. I am on version 107.1 which I believe is the latest.

I am just trying to understand what is going on here so I can resolve my own issues in the future.

Thanks

View frame flicker here: https://youtu.be/gcXM8ect72A
View prototyping link issue here: https://youtu.be/2tlKcthnepc

This is designed to designate an area that will close the menu when mouse leaving.
The difference lies not only in this. Pay attention to all interactions in prototype mode (which element they come from and which ones are used), as well as the size (height) of your variants.

It happens to me sometimes too and the selection in the list is not accepted. But in this case, dragging the connection manually from the point usually helps.
And note that you’re creating an interaction with the “On scroll” trigger. This is because you are dragging the connection onto an element that is out of frame bounds (look at the height of your variant).

Thank you for the explanation! I didn’t notice that the heights of my variant containers where shorter than the actual contents and that this was causing the prototype interaction to default to “on scroll”. It also seems to be the reason why the “mouse enter” interaction wouldn’t allow me to select a variant. Also I didn’t have the frame that contains both the top and submenu setup with the “mouse leave” interaction. Instead I had the “mouse leave” setup on the submenu element. This explains the flicker.

There are no Figma video tutorial put out by Figma (or anyone else that I’ve seen) that covers this scenario. Figma really should produce one IMO.

Thanks for your help!

One last issue. Links on the page content are still clickable even if the sub-menu overlays them. I the prototype link below, mouse-over the “Find Data” item… the links in the left menu are still clickable even though the menu is covering them.

If I’m not mistaken, this “feature” has always been. I don’t know if anyone has reported this, but you can create a new thread in the #product-feedback category, detailing your expectations. Or, if you think this is a bug, please submit a bug report directly to Support Team.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.