CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
D. 777KLM
D. 777KLM

Reputation: 470

Hover delay for parent of Dropdown jQuery

I am trying to create a dropdown menu. This code for it is: 

<script type="text/javascript">
  $(document).ready(function(e) {
    $('.has-sub').hover(function() {
      $(this).toggleClass("tap", 350, "easeOutSine");
    });
  });
</script>

<li class="has-sub">
  <a href="briefing.html">
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
  </a>
  <ul>
    <li>
      <a href="flightlog.html">
        <img src="images/share.png" id="menu-icons">Flight Log</a>
    </li>
    <li>
      <a href="loadsheet.html">
        <img src="images/weight.png" id="menu-icons">Loadsheet</a>
    </li>
    <li>
      <a href="#">
        <img src="images/compass.png" id="menu-icons">Alternates</a>
    </li>
    <li>
      <a href="#">
        <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
    </li>
  </ul>
</li>

What I trying to do is to create a hover delay for parent of the Dropdown. You would need to hover over "Flight Briefing" for 2 seconds for the Dropdown menu to appear.

I have tried some other solutions that were provided with different questions, but they did not work.

Upvotes: 1

Views: 55

Answers (2)

gavgrif
gavgrif

Reputation: 15509

Your .hover() function is a little wrong - you need a mouseenter and mouseleave function - I have set a timer of 2000 ms (2s) by using setTimeout() to give the 2 sec delay (although in my opinion thats a really long time to hover on an element beforehte effect occurs) and have the mouseout hide the ul directly. I am showing the ul buy habing the .has-sub ul have a display:none and then by adding the .tap class- display:block.

$(document).ready(function(){
    $('.has-sub').hover(
      function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)},
      function(){$(this).removeClass("tap"); clearTimeout()}
      );
  });
.has-sub ul{display:none}
.tap ul{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
  <a href="briefing.html">
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
  </a>
  <ul>
    <li>
      <a href="flightlog.html">
        <img src="images/share.png" id="menu-icons">Flight Log</a>
    </li>
    <li>
      <a href="loadsheet.html">
        <img src="images/weight.png" id="menu-icons">Loadsheet</a>
    </li>
    <li>
      <a href="#">
        <img src="images/compass.png" id="menu-icons">Alternates</a>
    </li>
    <li>
      <a href="#">
        <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
    </li>
  </ul>
</li>

Upvotes: 1

kind user
kind user

Reputation: 41893

Here you go. If you need anything else, let me know.

$('.link').mouseenter(function(){
  int = setTimeout(() => {
    $('.dropdown').fadeIn();
  }, 2000);
}).mouseleave(function(){
  clearTimeout(int);
});
.dropdown {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<li class="has-sub">
  <a href="briefing.html" class='link'>
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
  </a>
  <ul class='dropdown'>
    <li>
      <a href="flightlog.html">
        <img src="images/share.png" id="menu-icons">Flight Log</a>
    </li>
    <li>
      <a href="loadsheet.html">
        <img src="images/weight.png" id="menu-icons">Loadsheet</a>
    </li>
    <li>
      <a href="#">
        <img src="images/compass.png" id="menu-icons">Alternates</a>
    </li>
    <li>
      <a href="#">
        <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
    </li>
  </ul>
</li>

Upvotes: 1

Related Questions