WordPress.org

Forums

Rumput Hijau
[resolved] How to delay the drop down menu (11 posts)

  1. Marteens
    Member
    Posted 2 years ago #

    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!

  2. Marteens
    Member
    Posted 2 years ago #

    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?

  3. Satrya
    Member
    Theme Author

    Posted 2 years ago #

    I thought you just found the answer, right?

    you only need to remove the fast in slideUp("fast"), change it with 900

  4. Marteens
    Member
    Posted 2 years ago #

    Do 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.

  5. Satrya
    Member
    Theme Author

    Posted 2 years ago #

    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");
        });
  6. Marteens
    Member
    Posted 2 years ago #

    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.

  7. Marteens
    Member
    Posted 2 years ago #

    Is this what I am looking for? If it is, how can I insert it in my code?

  8. Marteens
    Member
    Posted 2 years ago #


  9. Satrya
    Member
    Theme Author

    Posted 2 years ago #

    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);
    });
  10. Marteens
    Member
    Posted 2 years ago #

    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.

  11. Marteens
    Member
    Posted 1 year ago #

    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).

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags