Adding a Slide Effect to Bootstrap Dropdown

Adding a slide effect to bootstrap dropdown

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.

Bootstrap multilevel dropdown slide effect?

Your fiddle is not totally clear for me. Your navbar has no .navbar class and your nav menus no .navbar-nav.

You can try to add the CSS code like that shown below:

.dropdown-menu,
.open > .dropdown-menu,
.dropdown-menu,
.open > .dropdown-menu .dropdown-menu {
  display: block;
  max-height: 0;
  overflow-y:hidden;
  visibility: hidden;
  -webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
     -moz-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
       -o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
          transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
  max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu .open .dropdown-menu {
  max-height: 500px;
  display: block;
  visibility: visible;
  -webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
     -moz-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
       -o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
          transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

demo: http://jsfiddle.net/hhb9u7db/1/

resources:

1. Transitions on the display: property
2. http://davidwalsh.name/css-slide

For Bootstrap default navbar you can use the following Less code:

.dropdown-menu, .open > .dropdown-menu, 
{
            display:block;
            max-height: 0;
            overflow-y:hidden;
            visibility:hidden;
            transition:max-height 2s ease-in-out, visibility 1.8s ease-in;
            max-width: 100%;        
} 
.navbar-nav > li.open > .dropdown-menu, 
{
max-height: 500px;  
display:block;
visibility:visible;
transition:max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition-delay:0s;
}

Which compiles with the autoprefix plugin into the following CSS code (lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"):

.dropdown-menu,
.open > .dropdown-menu {
  display: block;
  max-height: 0;
  overflow-y:hidden;
  visibility: hidden;
  -webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
       -o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
          transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
  max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu {
  max-height: 500px;
  display: block;
  visibility: visible;
  -webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
       -o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
          transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
  -webkit-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

demo: http://www.bootply.com/dd5aFlGTTE

How to change the animation of the dropdown menu in bootstrap?

Well, I think this will fullfill your needs:

DEMO

CODE (JS):

$('.dropdown-menu').addClass('invisible'); //FIRST TIME INVISIBLE

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

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

Instead of adding the javascript above, you can also try adding this CSS code:

DEMO_2

CODE (CSS):

.dropdown .dropdown-menu {
    height: 0px;
    display: block;
    overflow: hidden;
    opacity:0;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-ms-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;

}

.dropdown.open .dropdown-menu {
    height:200px;
    opacity: 1;

}

Cheers,

EDIT: I found that using all instead of height is even smooth as it also animates the opacity.

Bootstrap dropdown menu slide animation on hover

I don't think you need all of that code just to make it drop down on hover, I did the same using this jQuery its worked fine for me and much simpler.

$(document).ready(function() {    
  $('.navbar-default .navbar-nav > li.dropdown').hover(function() {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
      }, function() {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
      });
   });

Bootstrap dropdown menu show animation working but how to exit animation on dropdown menu hide

you need to remove the animations from your css and make your .dropdown-menu display: block !important because it was a js to hide and show dropdown in bootstrap, for initially you have to make transform: scale(0); to .dropdown-menu and also apply transition to it and when you click on button the class .show added with the class .dropdown-menu now when show class appears make css transform: scale(1); for more understanding see the following snippet.

.dropdown .dropdown-menu {  -webkit-transition: all .2s linear;  -o-transition: all .2s linear;  transition: all .2s linear;  display: block !important;  transform: scale(0);}.dropdown .dropdown-menu.show{  transform: scale(1);}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container pt-5">  <!-- Example row of columns -->  <div class="row">    <div class="col-md-12">
      <div class="dropdown mb-5">        <button type="button" class="btn btn-primary dropdown-toggle" data-display="static" data-toggle="dropdown">Dropdown button</button>        <div class="dropdown-menu">          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>        </div>      </div>

      <div class="btn-group dropleft dropdown mb-5">        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Dropleft  </button>        <div class="dropdown-menu">          <!-- Dropdown menu links -->          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>        </div>      </div>
      <div class="btn-group dropright dropdown">        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    DropRight  </button>        <div class="dropdown-menu">          <!-- Dropdown menu links -->          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>        </div>      </div>

    </div>  </div></div>

---

Related Topics