Adding delay to css menu with Jquery or JavaScript

Question

First I'd like to start by saying I'm very new to jquery and pretty new to JavaScript as well.

I'm looking to add some jquery/javascript to a css menu to create a delay between options to prevent a the options closing before a user gets to select it. I did some research and found this How to add a delay to CSS Vertical Dropdown Menu

But it seems to do the opposite which delays the opening not the closing of the sub menus.

Here is what I have http://jsfiddle.net/5jd7c/6/

Note that if you try to go directly from set 1 to opt 2 by going diagonally it closes the option and you end up in set 2 instead.

Thank you in Advance.

riwalk · Accepted Answer · 2012-10-08 19:08:47Z

1

Based on what you've said, I think you want the hoverIntent jQuery plugin. It does exactly what you describe and is very stable.

Much easier than doing it from scratch.

answered Oct 8, 2012 at 19:08

riwalk

14.3k6 gold badges54 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

It.levon Over a year ago

Thanks for that. That is the functionally I'm trying to get. Now I'm just having a hard time making it actually work.

kdureidy · Accepted Answer · 2012-10-08 23:55:41Z

1

You need to use the jQuery plugin hoverIntent that mentioned above. I created a quick sample for jsfiddle

I set the delay only on the work menu item, the timeout is 1 second(1000 ms) and i added an id for work li, and id for its ui list

hope that help.

answered Oct 8, 2012 at 23:55

kdureidy

9609 silver badges27 bronze badges

Collectives™ on Stack Overflow

Adding delay to css menu with Jquery or JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related