jQuery SlideUp / SlideDown Navigation Menu Drop-Down

[rpotterjr]

I need some help with making a slideDown / slideUp drop-down navigation menu…

What I have so far is here: http://codepen.io/rpotterjr/pen/fGLen

I am trying to make the drop-down in the navigation silde down on mouseover/mouseenter and slide back up on mouseout/mouseleave, or the hover event, but to my knowledge the hover event isn’t compatible in all browsers…

The ‘Portfolio’ link is all I need it for right now. The drop-down is functional, but…

I have tried this a few different ways and it is not working at all… The closest I got it would slide down, but stayed in a constant loop of sliding up and down once I stopped hovering over the ‘Portfolio’ link.

*I had this as a post before, but for some reason with the new changes to CSS-Tricks, it’s not letting me do anything with my previous post. Hopefully this works..

[TheDoc]

I’ve got with the mouseenter and mouseleave events here just because I’m used to doing that with Backbone: http://codepen.io/ggilmore/pen/982076b8dd766734e613f4eea744d70b

I also remove some CSS that would override everything. Specifically, I removed this:

li.navDirectory:hover ul {
  display: block;
}

And here’s the modified jQuery:

$(".navDirectory").mouseenter( function () {
  $(this).find(".sub-nav").slideDown(1000, "easeOutElastic");
});

$(".navDirectory").mouseleave( function () {
  $(this).find(".sub-nav").slideUp(500);
});

[Paulie_D]

>I’ve got with the mouseenter and mouseleave events here just because I’m used to doing that with Backbone:

…and Jquery have just deprecated hover I think.

[rpotterjr]

Yeah I don’t use hover, because for it to work properly you have to use the hover.js library file, which is just another load on the system… Not needed…

[rpotterjr]

So my next question is how would you add a delay to this?

[TheDoc]

What type of delay? When would the delay occur?

[rpotterjr]

A delay when hovering, before the action takes place, to prevent unwanted effects…

[rpotterjr]

Nevermind. I wasn’t thinking… I didn’t want a delay. I realized what was missing, the .stop()… lol

[rpotterjr]

http://codepen.io/rpotterjr/pen/dLIga

[Author]

Posts