How to delay the drop down menu
-
Hi.
I have a small problem with the drop down menu on my site. When the mouse is just outside the menu, the menu dissapears, and I have to go back to the top. This can be a bit annoying when the menu has 3 or 4 levels. Is ther some way to put a delay on the menu so it doesn’t go away at once?
Thanks you!
-
I found this thread, with a similar problem. So I tried to do what they said, but so far no luck. I found the “.slideUp()”, like they said to do, in
wp-content --> themes --> rumput-hijau --> js --> methods.js
And it looks like this:
/* Drop down menus */ $j(".inside-primary-nav ul li ul").parent().addClass("arrow"); $j(".inside-primary-nav ul li").hover(function(){ $j(this).addClass("hover"); $j(this).find("ul:first").slideToggle("fast"); }, function(){ $j(this).removeClass("hover"); $j(this).find("ul:first").slideUp("fast"); });
I tried to insert .delay(‘900’) before the .slideUp like this
$j(this).find("ul:first").delay('900').slideUp("fast");
but that messes up the menu.. do I have to put it in another place? Any ideas?
I thought you just found the answer, right?
you only need to remove the
fast
inslideUp("fast")
, change it with 900Do you mean in the original or in the one where I had put the .delay(‘900’)?
I tried both to be sure, and maybe I did something wrong because it’s not working. First i tried
$j(this).find("ul:first").slideUp("900");
and as far as I can tell nothing changed. Then I tried
$j(this).find("ul:first").delay('900').slideUp("900");
and that messes up my menu. It closes when I am hovering over it.
No, you don’t need the
.delay('900')
, just try it/* Drop down menus */ $j(".inside-primary-nav ul li ul").parent().addClass("arrow"); $j(".inside-primary-nav ul li").hover(function(){ $j(this).addClass("hover"); $j(this).find("ul:first").slideDown("slow"); }, function(){ $j(this).removeClass("hover"); $j(this).find("ul:first").slideUp("slow"); });
I copied that code to try it out, but it isn’t quite what I am looking for. This code makes the menu slow down when it slides down, but the menu doesn’t remain any longer when your mouse goes of it.
I would like that the menu remains like one second (or something) after you leave it with the mouse. In that way, if you leave it without intension, it wont go away, and you can continue.
I left in the code you gave me, so you can see how my menu works now on my site.
Is this what I am looking for? If it is, how can I insert it in my code?
I fount it http://stackoverflow.com/questions/2966611/how-to-delay-hiding-of-a-menu-with-jquery-dropdown-menu
Try this one
$j(".inside-primary-nav ul li ul").parent().addClass("arrow"); $j(".inside-primary-nav ul li").hover(function(){ $j(this).addClass("hover"); $j(this).find("ul:first").slideDown("slow"); }, function(){ $j(this).removeClass("hover"); setTimeout(function() { $j(this).find("ul:first").slideUp("slow"); }, 1000); });
Hi.
That still doesn’t do it I’m afraid. I can’t understand why it won’t work.
This code made the menu drop down slow the first time you hover it. The second time you hover it it seems like it has already been opened, so it just pops up. But the slide up dosen’t change. When I take the mouse of the menu, it still dissapears.
Maybe we are looking in the wrong file? could it be something in the jquery.mobilemenu.js file for example? (I am just guessing). If not, maybe something else in the methods.js could do it. The other .js files doesn’t seem to have anything to do with the menu.
By the way I am very gratefull that you are helping me out here, satrya.
I got some help in the Stackoverflow forum and we found a solution. This is my new methods.js – file.
And here is a link to where I got the help: http://stackoverflow.com/questions/17504845/how-to-delay-the-drop-down-menu-for-my-website/17507437?noredirect=1
Thanks again! Here is a link to my site, if you want to see how it’s working (my site has an issue with IE, so the menu isn’t working properly there yet – but I’m working on it).
- The topic ‘How to delay the drop down menu’ is closed to new replies.