CODEWITHSUNDEEP
jqueryhtmlcsshover
Nobunaga
Nobunaga

Reputation: 95

How can I put a delay on a submenu everytime the parent menu is hovered? (Front-end)

I am trying to put a delay effect on my submenu.

  <ul id="main-menu">
       <li class="firstLevel hasSubmenu"><a href="/inmotus/" class="firstLevel">    
  <nav class="submenu">                 
     <ul>
        <li><a href="#"><font><font class="">About</font></font></a></li>
        <li><a href="#"><font><font class="">Sample</font></font></a></li>
        <li><a href="#"><font><font>Inmotus misse &amp; Vision</font></font></a></li>
        <li><a href="#"><font><font class="">Voluptatem</font></font></a></li>
        <li><a href="#"><font><font class="">Ratione</font></font></a></li>
     </ul>
  </nav>
  <ul>

Problem: How can i apply a delay on my .submenu class every time .hasSubmenu class is hovered?

Please help me...

Upvotes: 0

Views: 564

Answers (4)

Voltlight
Voltlight

Reputation: 136

$(document).ready(function(){
$('.submenu').hide();
$( '.hasSubmenu' ).hover( function() {
_this = $(this).parents().find('.submenu');
setTimeout(function() { 
_this.fadeIn(); }, 500);
}, function() {
_this.fadeOut();
});
});

Try something like this. (FIXED)

http://jsfiddle.net/swp64ydv/1/

Upvotes: 0

wallop
wallop

Reputation: 2581

i am not sure what you expect after delay but assuming you want it to appear

$('.hasSubmenu').mouseenter(function()
{
setTimeout(function(){handleMouseAction(true);},500)
}).mouseleave(function()
{
setTimeout(function(){handleMouseAction(false);},500)
});

function handleMouseAction(actionFLag)
{
if(actionFlag)
{
$('submenu').show();
}
else
{
$('submenu').hide();
}
}

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

You code is not properly as i understand from your code, below is a solution. I hope it will help you.

$(document).ready(function(){
    $('ul li.firstLevel').click(function(){
    $('ul ul').slideToggle();
    });
})

DEMO

Change the value

$('ul ul').slideToggle(600);

then you manage the delay timing.

Upvotes: 1

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

If your code is based on javascript, This link would be much helpful. http://cherne.net/brian/resources/jquery.hoverIntent.html

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.

It has a configuration to change the delay on hover, have a look at is it suit to you.

Upvotes: 1

Related Questions