CODEWITHSUNDEEP
javascriptcss
Luke Lee
Luke Lee

Reputation: 45

Menu hover submenu - longer time

I want to increase the freezing timing for the sub-menu to stay same when I mouseover it. Here's my code: 

<div class="navbar-collapse collapse">
    <ul id="subnav" class="nav navbar-nav">
        <li style="width: 16.6666666666667%">
        <li style="width: 20%">
            <a style="width: 16.6666666666667%" href="/">Home</a>
        </li>
        <li style="width: 20%"><a style="width: 16.6666666666667%">Corporate Information</a><div class="sub-menu" style="overflow: hidden; display: none;">
            <div class="menuInnerLeft"><span>Transforming Care Bringing Health to Every Home 1</span></div>
            <div class="menuInnerRight">
                <ul>
                    <li>
                        <a class="subNavItem" href="http://www.juronghealth.com.sg/We_Are_JurongHealth/Our_Vision_Mission_Value.aspx" target="_blank">Vision, Mission &amp; Values</a>
                    </li>
                    <li>
                        <a class="subNavItem" href="http://www.juronghealth.com.sg/We_Are_JurongHealth/At_the_Helm.aspx" target="_blank">Board &amp; Senior Management</a>
                    </li>
                </ul>
            </div>
    </ul>
</div>

Upvotes: 0

Views: 502

Answers (2)

Tariq
Tariq

Reputation: 2871

You can use the Jquery hover:second parameter which is the function to use when you leave the element:

$(".menu_item").hover(
    function(){},
    //When hovering the item: stuff

    //When You leave the item:
    function(){
        //Leave duration time:
        var duration = 500;
        setTimeout(function(){}, duration );
    }
);

Or benefit the jquery stop() function.

Upvotes: 0

Megha Nagpal
Megha Nagpal

Reputation: 180

Try this

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

Upvotes: 1

Related Questions