Adding a slide effect to bootstrap dropdown

Question

I'm using bootstrap, and I'd like to add animation to a dropdown. I want to add an animation to it, slide down and back up when leaving it. How could I do this?

Things I tried:

Changing the Js drop down file like this:

How can I make Bootstrap's navigation dropdown slide smoothly up and down?

Answer 1

If you update to Bootstrap 3 (BS3), they've exposed a lot of Javascript events that are nice to tie your desired functionality into. In BS3, this code will give all of your dropdown menus the animation effect you are looking for:

  // Add slideDown animation to Bootstrap dropdown when expanding.   $('.dropdown').on('show.bs.dropdown', function() {     $(this).find('.dropdown-menu').first().stop(true, true).slideDown();   });    // Add slideUp animation to Bootstrap dropdown when collapsing.   $('.dropdown').on('hide.bs.dropdown', function() {     $(this).find('.dropdown-menu').first().stop(true, true).slideUp();   }); 

You can read about BS3 events here and specifically about the dropdown events here.

Answer 2

Also it's possible to avoid using JavaScript for drop-down effect, and use CSS3 transition, by adding this small piece of code to your style:

.dropdown .dropdown-menu {     -webkit-transition: all 0.3s;     -moz-transition: all 0.3s;     -ms-transition: all 0.3s;     -o-transition: all 0.3s;     transition: all 0.3s;      max-height: 0;     display: block;     overflow: hidden;     opacity: 0; }  .dropdown.open .dropdown-menu { /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */     max-height: 300px;     opacity: 1; } 

The only problem with this way is that you should manually specify max-height. If you set a very big value, your animation will be very quick.

It works like a charm if you know the approximate height of your dropdowns, otherwise you still can use javascript to set a precise max-height value.

Here is small example: DEMO

---

! There is small bug with padding in this solution, check Jacob Stamm's comment with solution.