Animating bootstrap dropdown menu on click

Question

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

With mouseover works fine but I need to open after clicked. If I replace .hover with .click when the dropdown is clicked it opens and close real quick.

Is it possible to do it the traditional way with bootstrap, to open when clicked and to close when mouseout or click anywhere else? Any help. Thanks.

Answer 1

Yokomizor's answer on using CSS transitions is a nice idea, but in his code below:

.dropdown-menu {
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    display: block;
}
.open .dropdown-menu {
    opacity: 1;
}

What he ends up doing is that he is only making the dropdown invisible only, but in actual fact the things on the dropdown is still there, just that you can't see it. A better way is:

.dropdown-menu {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    transform: rotateX(90deg);
    transform-origin: top;
    opacity: 0;
    display: block;
}
.open .dropdown-menu {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
}

In this case, it also creates a nice (sort of) slide down and up animation.

Demo

Answer 2

i have used this on hover and is working fine, here is the fiddle for this

http://jsfiddle.net/html5beginners/rtqnxrLd/6/embedded/result/

body {
  background: #333;
  width: 98% !important;
}
.DonateUs{
    width: 200px;
height: 60px;
background: none repeat scroll 0% 0% #16A085;
color: #fff;
Padding: 13px 56px;
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 4px 0px #023d31;
float:right
text-shadow: 0px 1px 0px #023d31;font-family: oswald;
}
.navbar-x {
  text-align: center;
}

.navbar-x .nav {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.navbar-x .nav:hover.nav-pills > li.active > a, .navbar-x .nav:focus.nav-pills > li.active > a {
  color: #eee;
}

.navbar-x .nav:hover.nav-pills > li.active > a:hover, .navbar-x .nav:hover.nav-pills > li.active > a:focus, .navbar-x .nav:focus.nav-pills > li.active > a:hover, .navbar-x .nav:focus.nav-pills > li.active > a:focus {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li > a {
  width: 94px;
  color: #eee;
  transition: color 0.42s ease-in-out;
}

.navbar-x .nav > li > a:hover, .navbar-x .nav > li > a:focus {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li.active > a {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li.bottom-bar {
  transition: left 0.42s ease-in-out;
  position: absolute;
  height: 3px;
  width: 90px;
  bottom: 0;
  background-color: #ebbf00;
}

.navbar-x .nav > li:nth-child(1).active ~ .bottom-bar {
  left: 0px;
}

.navbar-x .nav > li:nth-child(1):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(1):focus ~ .bottom-bar {
  left: 0px !important;
}

.navbar-x .nav > li:nth-child(2).active ~ .bottom-bar {
  left: 100px;
}

.navbar-x .nav > li:nth-child(2):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(2):focus ~ .bottom-bar {
  left: 100px !important;
}

.navbar-x .nav > li:nth-child(3).active ~ .bottom-bar {
  left: 200px;
}

.navbar-x .nav > li:nth-child(3):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(3):focus ~ .bottom-bar {
  left: 200px !important;
}

.navbar-x .nav > li:nth-child(4).active ~ .bottom-bar {
  left: 300px;
}

.navbar-x .nav > li:nth-child(4):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(4):focus ~ .bottom-bar {
  left: 300px !important;
}

.navbar-x .nav > li:nth-child(5).active ~ .bottom-bar {
  left: 400px;
}

.navbar-x .nav > li:nth-child(5):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(5):focus ~ .bottom-bar {
  left: 400px !important;
}

.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 360px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #bbb;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #383838;
  background: rgba(34, 34, 34, 0.8);
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}

.about a {
  color: #eee;
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  -o-transition: background 0.1s;
  transition: background 0.1s;
}

.about a:hover {
  text-decoration: none;
  background: #555;
  background: rgba(255, 255, 255, 0.15);
}

.about-links {
  height: 30px;
}

.about-links > a {
  float: left;
  width: 33%;
  line-height: 30px;
  font-size: 12px;
}

.about-author {
  margin-top: 5px;
}

.about-author > a {
  padding: 1px 3px;
  margin: 0 -1px;
}

.logo-html5beginners {
  margin: -12px 0 0 0px;
  width: 39%;
}

Answer 3

In BootStrap 3, you can use dropdown events :

       // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
        $('.dropdown').on('show.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
        });

        // ADD SLIDEUP ANIMATION TO DROPDOWN //
        $('.dropdown').on('hide.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
        });

Answer 4

You can use CSS3 transitions:

.dropdown-menu {
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    display: block;
}

.open .dropdown-menu {
    opacity: 1;
}

Check browser support on http://caniuse.com/css-transitions

Answer 5

Try this, see if this is what you are looking for. Click to open dropdown, mouse out to hide it. http://jsbin.com/ibovag/1/

$('.dropdown-menu').on('mouseover', function(){
  $(this).on('mouseleave',hideDropdown);
});
function hideDropdown(e)
{
  $(this).closest('.open').removeClass('open');
  $(this).off('mouseleave');
 }

Answer 6

You can use slideToggle from JQuery!

http://api.jquery.com/slideToggle/

like this:

$('.navbar .dropdown').click(function() {
  $('.dropdown-menu', this).slideToggle(250);
});