Adding a delay on bootstrap dropdown

Question

I'm trying to find the most simplistic way of adding a delay on this bootstrap dropdown...http://www.bootply.com/64074 I have tried various methods and scripts but I cant seem to do it. I've added a css line to allow auto dropdown on mouseover.

            <!-- Top Nav -->
                    <div class="navbar hidden-phone well well-small">
                        <div class="navbar-inner header-drop-nav">

                    <!-- 1st dropdown -->
                    <ul class="nav nav-tabs">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Destination <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!--  1st Top Nav links -->
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <!-- 2nd dropdown -->
                    <ul class="nav nav-tabs pull-middle">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Activity <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!-- 2nd Top Nav links -->
                        <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <!-- 3rd dropdown -->
                    <ul class="nav nav-tabs">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Interest <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!-- 3rd Top Nav links -->
                        <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <!-- 4th dropdown -->
                    <ul class="nav nav-tabs">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Special Offers <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!-- 4th Top Nav links -->
                        <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <form class="navbar-form pull-right hidden-tablet">
                        <input class="span3" type="text" placeholder="Search">
                        <button type="submit" class="btn btn-primary">GoSeeDo</button>
                    </form>

                        </div>
                    </div>

For this you have to customize dropdown.js file...

SaurabhLP
– SaurabhLP

2013-06-13 10:52:49 +00:00
Commented Jun 13, 2013 at 10:52 — SaurabhLP
– SaurabhLP, Commented Jun 13, 2013 at 10:52

Tom Rudge · Accepted Answer · 2013-06-13 11:02:47Z

14

This JQuery did the trick! http://www.bootply.com/64081

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

answered Jun 13, 2013 at 11:02

Tom Rudge

3,2229 gold badges56 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carol Skelly Over a year ago

Here is another Bootply bootply.com/64078, this uses a slower fadeIn()

Nick B · Accepted Answer · 2014-11-04 23:34:19Z

1

For those that come across this thread later.. check out this great plugin that is Bootstrap 3 compatible and works with nav menus, buttons, button groups etc:

https://github.com/CWSpear/bootstrap-hover-dropdown

answered Nov 4, 2014 at 23:34

Nick B

7,6892 gold badges35 silver badges28 bronze badges

Comments

marko.crni · Accepted Answer · 2021-07-23 13:08:44Z

1

If you are using submenus, need to add .first() after .find():

$('div.dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).delay(100).fadeIn(100);
}, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeOut(300);
});

answered Jul 23, 2021 at 13:08

marko.crni

794 bronze badges

Collectives™ on Stack Overflow

Adding a delay on bootstrap dropdown

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related