[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 924
  • Last Modified:

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?

0
hotelghost
Asked:
hotelghost
  • 3
  • 2
1 Solution
 
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
 
prokvkCommented:
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now