Use mouse enter + leave AND Click in dropdown menu?

Interactive Components Questions
1

Hello!

I’m trying to create a menu and am running into some difficulties. I would like for the sub menu to drop down when the mouse hovers over the label in the navigation. I’ve prototyped this as a mouse enter and mouse leave interaction and overlays.However, I’d also like to be able to click the label to navigate users to a landing page. I can’t seem to get the prototype to include the click, it seems buried under the overlay interaction. Any work arounds?

2

Overlays block events underneath, so two workarounds:

  1. Make a large interactive variant of main menu + submenu so you don’t use overlays at all
  2. Add the hovered state of the active label to the overlay so it is clickable (the main downside is that you’d need multiple overlays, one for each coverable label)

FWIW, hover actions like you describe won’t work on touchscreens, so option 3 is to change the interaction pattern to not use hover at all. Just food for thought.

3

Thanks for the suggestion, I’m still running into some issues, even when using interactive variants. The main issue is that I need the mouse enter trigger to overlap with the dropdown menu, so the menu doesn’t close as soon as I try to make a selection (and move away from the label). When I do this, I can’t ALSO add a click to the same label trigger, because Figma doesn’t know how to handle the conflicting info. The only work around I’ve found is making a smaller trigger over the label itself that butts up to the larger dropdown trigger below it, however there’s then a delay when displaying the dropdown menu, since your mouse has to be in the specific spot. Anything that will make this more elegant??

4

Hmm. So messing around with overlays I came up with this interesting technique I haven’t tried before, that I think matches your use case. It uses overlays with clipping turned off, combined with using mouse leave ONLY on the submenus (not the main labels). This has four effects:

  1. It lets you click the main menu items to navigate to landing pages
  2. It keeps the submenu visible until you hover outside the main menu completely
  3. It lets you interact with the submenu (so you can click submenu items)
  4. It lets you switch submenus by mouse entering the main menu items

You you have to create overlays for each main menu hover state, which may be impractical for large menus, so there are some limitations.

But as a proof of concept to demonstrate this technique, here a link to a file you can duplicate to your drafts. It is very complicated and something I would hesitate to do for a very complicated menu tree: Figma

1 Like
5

Thanks for sharing - I had a few similar work arounds but hadn’t come up with this exact formula. Appreciate your help - glad to know I’m not missing something obvious in Figma. Although not a common interaction, would sure be useful.

1 Like
6

Hi @MC_55, you can also look at the solution without using overlays in this thread: How to create submenu that appears "While Hovering" - #4 by tank666

1 Like
7

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