Maybe this isn’t the appropriate place to get assistance but I need some advice on creating a global site navigation and I’d like to do this in a component so I don’t have to create multiple copies of the site home page for each submenu state.
I have seen many example of dropdown menus and submenus that appear “on click” but something like a global site navigation would respond to “on hover” events. I have set up a top navbar with several items. For each I protoyped a “While Hovering” “change to” a variant with submenu open. The problem is once the mouse moves to the open submenu, the “While Hovering” condition is no longer true and the variant reverts back to the default variant with no submenu open so no items in the submenu can be clicked.
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
When the user moves the mouse to another top menu item (Access Data, Visualize, etc) a different submenu needs to be displayed.
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.
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.
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.
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.
