Stop drive-by dropdown hovers

JavaScript
1

htt p://sa cr edsf.f inal sit e.c om/about

How can I make it so users must stay on the dropdown on the horizontal navigation for like, a second or so before the dropdown occurs? It is annoying right now that just drive-by’ing results in the page shift.

$("#fsHeader .fsBanner > .nav-main ul.fsNavLevel1 > li.fsNavParentPage").on("mouseenter",function() {
  var _self=this;
  $("#fsHeader .fsBanner > .nav-main").animate({
    "height":$("#fsHeader .fsBanner > .nav-main > .fsElementContent").outerHeight()
  },200);
  $("#fsHeader .fsBanner > .nav-main").animate({
    "height":$("#fsHeader .fsBanner > .nav-main").outerHeight()+$(_self).find(">.fsNavPageInfo").outerHeight()
  },200);
});

$("#fsHeader .fsBanner > .nav-main ul.fsNavLevel1 > li.fsNavParentPage").on("mouseleave",function() {
  $("#fsHeader .fsBanner > .nav-main").animate({
    "height":$("#fsHeader .fsBanner > .nav-main > .fsElementContent").outerHeight()
  },200);
});

I know the JS could be improved (actually using the cached “this”, etc) but this was just a quick mockup I made a bit ago getting it to work.

2

Why not either a) make the menu overlay the picture (which stops the shift) or b) make the menu visible onClick (like SP does with theirs on the main site)

3

Unfortunately I do not have control over design aspects like this. This must be on hover and they wanted it to shift the page down :-/ .

Trust me, I do not like how it is set up now either.

4

How about a css transition delay.

e.g.

.fsNavigation{transition-delay:1s;}

Or use hover-intent plugin.

5

Due to the way this is set up, and the functionality of this (automated markup), I need JS to be the driving force behind this show/hide. I only change visibility via CSS (so you can’t see it overlaying) so I don’t think the transition delay would be of help, so I think I’ll need to mess around with the hover intent plugin. Thanks for that!

6

Yes the js can stay in place but the css delay will still take effect.

7

It appears that it’s screwing with the dropdown effect (albeit working in that aspect). You can see it live.

I tried putting the JS mouseenter in a setTimeout of 1 additional second, but that didn’t work. Also tried increasing the animation from 200, to 1200, but perhaps I’m missing something.

8

Perhaps this is better.

.fsNavigation{transition:height .5s ease 1s}

You also need to clear out the queue because the menu goes up and down a load of times if you run the mouse back and forth.

9

Could you provide more details about this?

Also, I did a separate transition delay for hovering on / off beceause when you hover off, I think it would be better for it to get closed faster. Let me know your thoughts! Thanks.

10

Before you call animate call .stop() so that any running animation is stopped otherwise they all chain and build up.

… -main").stop().animate(etc…

11

I actually just removed the animate() part a while ago and just did .css() because the CSS is handling the animation part of that. I was wondering if you were still seeing it, and if so, what you are doing to replicate it because I don’t.

I’m guessing you aren’t seeing it though because of my .css() change?

12

No, its ok now :smile:

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.