CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
BANGO
BANGO

Reputation: 57

How to add a Delay on Bootstrap Dropdown Hover

I'm trying to add a delay for the bootstrap dropdown. I have already added css to make the dropdown show on hover.

You can test it here http://www.bootply.com/YcVBzvXqrR

Here is my HTML:

 <div class="container">
   <div class="row">
      <div class="col-xs-12">
         <div class="category-box">
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-bullhorn fa-3x"></i>
                     <h5>CATEGORY 1</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 1</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-car fa-3x"></i>
                     <h5>CATEGORY 2</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 2</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-file-text fa-3x"></i>
                     <h5>CATEGORY 3</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 3</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
                     <h5>CATEGORY 4</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 4</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-cogs fa-3x"></i>
                     <h5>CATEGORY 5</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 5</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-users fa-3x"></i>
                     <h5>CATEGORY 6</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 6</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-heart fa-3x"></i>
                     <h5>CATEGORY 7</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 7</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-briefcase fa-3x"></i>
                     <h5>CATEGORY 8</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 8</a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

And here is my CSS:

.dropdown:hover .dropdown-menu {
    display: block;
 }

.category-overlay{
    width:1190px;
    height:90px;
    background:#ddd;
    margin-top:30px;
}

I need to know how to make the dropdown appear with after a small delay.

Upvotes: 2

Views: 6790

Answers (1)

Kaustav Banerjee
Kaustav Banerjee

Reputation: 285

Two changes I would recommend

  1. Add the below Jquery code to add delay:

    jQuery('div.dropdown').hover(function() {

          jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
        }, function() {
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });

  2. Remove the css

    /.dropdown:hover .dropdown-menu { display: block; }/

This is the fiddle I have modified

http://www.bootply.com/YcVBzvXqrR#

Upvotes: 6

Related Questions