adding jquery delay fade to css horizontal list menu

I've implemented a horizontal css list menu per the instructions here:
http://www.alistapart.com/articles/hybrid/

They function exactly like this: http://www.alistapart.com/d/hybrid/hybrid-4.html

However, now i am getting feedback from my users that the menu changes "too fast". That is, when they are trying to go over to some of the submenu items, they accidentally mouse on the other top level nav so it switches the submenu.

What i want to do is make it so that the sub menus stay on for a few seconds upon mousing off. I want to use jquery to do this but after experimenting with fadeout and fadein, it doesn't look to be what I am wanting to do. Any ideas on the function to use here? Or any ideas for how else to do this?

hotelghostAsked:
Who is Participating?
 
prokvkConnect With a Mentor Commented:
I looked up the code on the link you provided, and based on that, your Switch function may look like this:



function Switch(menu,elem)
        {
            menu.find('li.over').removeClass('over');
            
            elem.addClass('over');
        }//Switch

Open in new window

0
 
prokvkCommented:
Hello,

first of all, get this jQuery plugin (jQuery timers):

http://jquery.offput.ca/every/

After including it on your page you can use the following code:

GL ;)
$(function () {
            var shown = false;
            var menu  = $('ul');
        
            menu.find('li').mousemove(function (e) {    //you can edit this to fit your menu
                if (!shown)
                {
                    Switch();   //example - put your menu item switch code here
                    
                    shown = true;
                }//if (!shown)
                else
                {
                    $(this).stopTime('switch').oneTime(1000,'switch',function () {  //replace 1000 with your delay value - milliseconds
                        Switch();   //example - put your menu item switch code here
                    });
                }//else
            });
        });

Open in new window

0
 
hotelghostAuthor Commented:
So on the switch code, that would be subnav visible and not visible?
0
 
prokvkCommented:
I'm sorry what ? :)
0
 
hotelghostAuthor Commented:
The Switch(); function. In the comments, it said to put your menu item switch code here.

So that I am clear, I would create the Switch function which would have javascript that adds the css class or replaces the class for that object, in this example, the li? Am I reading that right?

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.