asked on

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?

prokvk

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

hotelghost

ASKER

So on the switch code, that would be subnav visible and not visible?

prokvk

I'm sorry what ? :)

hotelghost

ASKER

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?

ASKER CERTIFIED SOLUTION

prokvk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial