AnyLink CSS 2.2 - Add a Delay? (mega drop-down)

1) Script Title: AnyLink CSS Menu v2.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm

3) Describe problem: I've used this script to create a mega drop-down menu on our site. (http://www.thewatchprince.com/) I'm really happy with the results except for one thing... The drop-downs appear INSTANTLY on mouseover. If you are moving your mouse across the menu a lot (like to our search box or the browser's back button) the menus overlap as they flash on and off and fade in and out constantly.

I didn't think it was a big deal at first, but it's really bugging me now and I can see our customer support reps struggling to avoid the drop-downs as they try to navigate the site while on the phone with customers. NOT good :(

What I've realized we need is a slight delay before the menus appear. Jakob Nielsen (see "Speed" at http://www.useit.com/alertbox/mega-dropdown-menus.html) advises a .5 second delay, but I think that might be overkill. I just want users to pause the mouse on a link before the drop-down appears.

Is a delay possible?

Sure, try the below modified .js file, which should add a 300 millisec delay before the drop down menu appears onMouseover of its anchor link. You can adjust 300 as desired obviously.

That worked great! I set it for 100 and it is just enough of a delay to prevent the constant on/off of the dropdowns. I am really pleased! Thank you so much.

There is one side effect, though. My css styling for the links in the menu bar no longer work in FF or Chrome. When you mouseover the main menu bar, the background should turn orange and the text gets an underline.

They still work in IE, but I get this page error

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 19 Nov 2009 16:57:51 UTC


Message: Object doesn't support this property or method
Line: 195
Char: 2
Code: 0
URI: http://www.thewatchprince.com/core/m...57b9cf&_xt=.js

Ah yes a bug is what that is. I've edited my previous post above to include the fixed version.

Beautiful!!! You should update your page with this revised script and then reposition AnyLink as a Mega DropDown Menu!!! Ever since Jakob Nielsen (http://www.useit.com/alertbox/mega-dropdown-menus.html) recommended mega dropdown menus, people have been looking all over for a good script to achieve this functionality. None of the offerings out there come close to the neatness and simplicity your script offers!

I am reallly happy! --mimib

One problem I have found with the Mega-dropdown menu is that it takes forever to load. Dial-up users may not wait and move on.