Set a delay/timeout on hover target for displaying mega menu

#1

I have a mega-menu style navigation bar at the top of my website prototype, and I have an issue where the menu dropdowns appear while the user is mousing around the page (when they are not intentionally going to the navigation). This is very distracting and most times the user is just moving their mouse to another area of the page, and the flyouts are triggered.

My question is, is there a way to replicate a form of hover intent on the top level navigation? Basically, a timeout on the hover so that they flyout does not open unless they have hovered on it for >100 milliseconds? This would prevent my menu flyouts from haphazardly opening while the user mouses around the page.

As a side note, in web development I have built this behavior using a jquery hoverIntent plugin, so if you are familiar with that, that is the behavior I am trying to replicate here.

#2

Hi!

Rather than using OnMouseEnter, you can use OnMouseHover, which is triggered only when the mouse rests over the object for a given time span. The downside is that you are stuck with the time span that is built into OnMouseHover, which feels a tad too long to me.

Another option: create a 10 state empty dynamic panel called “timer” and do the following, which would give you a 500ms delay. (10*50ms)

Menu hotspot script:

OnMouseEnter
[INDENT]Set Timer to “State 1”
Set Timer to Next repeat every 50ms

On MouseOut
Set Timer to Stop Repeating[/INDENT]

Timer script:

OnPanelStateChange
[INDENT]If state of panel This equals “State 10”
[INDENT]Show (menu)[/INDENT][/INDENT]

[Edit] It occurs to me that you might be using “treat as flyout” on the show menu command. If that’s the case, you’ll want to use the10-state panel as the hotspot itself (i.e., the DP gets the OnMouseEnter/Out scripts.)

The following shows this implementation. For demonstration purposes, the dynamic panel contains a number showing which state it’s on, rather than being empty.

Live sample

File: mouseOverDelay.rp (72.9 KB)

Mouseover takes too long
#3

Thank you for saving the day josephxbrick! This solution with the 10-state dynamic panel as a timer worked nicely.

I tried using OnMouseHover with ‘treat as flyout’ just to see the difference, and I agree with you. The delay is too long. I think the user will either be frustrated with how “slow” the interface seems, or may think nothing is happening and move their mouse and not even see the flyout menu.

closed #4
unlisted #5