Help Needed / How to create a larger enter/exit area

#1

Hi,

I am having trouble with creating a menu that displays after the user exits the menu label. I have a mega menu that animates down/up and works perfect, but the hot spot for the menu is too small. Every time I move off the label, the menu disappears. I need help making a larger area for the mega menu to display even if the user enters the cursor over the menu itself.

So why am I doing it this way. I need to show the menu unveiling as apposed to animating down with the background, so I need to have the background animate down and then have the menu links fade in. Both are on separate groups and that is why I can’t use the normal “treat as flyout”.

I have attached a simple test filemenu_test.rp (44.9 KB)

Thanks for any help you can provide.

-Steve

#2

You’re right on track. For your setup, the trick is making the button area overlap the mega menu area and then in the Mouse Exit event, testing if the cursor is not over the area of the mega menu. Since your “Menu” button has no fill or border you could make it a few pixels taller (dragging bottom edge down a bit to increase height) and add a conditional case to Mouse Exit of “If cursor is not over area of menu” .

This can make it a bit tricky for the user to navigate to one of the mega menu items though, because they need to move the cursor straight down first, then to the left. It is more natural to move the mouse cursor directly toward the target, which would likely cause the mega menu to disappear before they get there–as the cursor exits the “Menu” button to the left before going down over the mega menu. But, a very wide “Menu” button would then show the mega menu when the cursor isn’t even near the text, “Menu”.

So, another solution is to create a hotspot big enough to cover the area of “natural cursor movement”. Hide it by default, and show it with the Menu button’s Mouse Enter event. Then cut the Mouse Exit event from “Menu” and paste it to the hotspot. This is how you can make the trigger area larger after the cursor enters the initial “Menu” button area.

Take a look at this updated file.
menu_test.rp (46.4 KB)

#3

Hi mbc66,

Thanks so much. Menu WORKS GREAT!! :+1: I had to recreate your updated file about five times before I started to figure it out. :roll_eyes: I have the menu working in my master prototype for my client and it works. Is there a tip area on this forum?

Steve