Adding a slide effect to bootstrap dropdown

bootstrap 4 dropdown-menu animation
dropdown effect
bootstrap navbar slide down
bootstrap collapse slide up
bootstrap menu effects
bootstrap dropdown on hover
bootstrap 4 slide toggle menu
dropdown with images bootstrap

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?

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 Nav Dropdown Slide Effect, Fold All; Unfold All. 121. 1. <main class="container">. 2. <header class="​jumbotron text-center">. 3. <h1>Dropdown Slide Effect Bootstrap</h1>. 4. </​header>. 5. Adding a slide effect to bootstrap dropdown. Step 1: Add animate.css to your page with the head tags: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0 Step 2: Use the standard Bootstrap HTML on the trigger: <div class="dropdown"> <button type="button"

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.

How to add slide effect in Bootstrap 3 Navbar Dropdown items , How to add slide effect in Bootstrap 3 Navbar Dropdown items. Adding the slide effect with jQuery. First thing first, let's add a few lines of jQuery to add the slide effect for the menu items that have Dropdowns: Fixing issue for smaller screens. The jQuery we just prepared, will work nicely when the viewport width is How to add slide effect in Bootstrap 3 Navbar Dropdown items Adding the slide effect with jQuery. Fixing issue for smaller screens. The jQuery we just prepared, View the live demo. So, now we have a slide effect for those Dropdown items,

I'm doing something like that but on hover instead of on click.. This is the code I'm using, you might be able to tweak it up a bit to get it to work on click

$('.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()
});

Add Smooth Sliding Animation To Bootstrap 4 Dropdown Menu , How to use it: Add the CSS class collapse to the dropdown menus. < div class = "collapse navbar-collapse" id = "navbarCollapse" > The necessary CSS/CSS3 rules for the smooth sliding animation. .dropdown-menu.collapsing { The JavaScript to hide the dropdown menu after a menu item is clicked. Browse other questions tagged javascript jquery angularjs twitter-bootstrap-3 or ask your own question. Blog The Overflow #10: The 500-mile email

I don't know if I can bump this thread, but I figured out a quick fix for the visual bug that happens when the open class is removed too fast. Basically, all there is to it is to add an OnComplete function inside the slideUp event and reset all active classes and attributes. Goes something like this:

Here is the result: Bootply example

Javascript/Jquery:

$(function(){
    // 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){
        e.preventDefault();
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            //On Complete, we reset all active dropdown classes and attributes
            //This fixes the visual bug associated with the open class being removed too fast
            $('.dropdown').removeClass('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

making bootstrap drop down menus opened with a sliding animation , For IE support this works after adding mordenizr and checking for css transitions. .no-csstransitions ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }. A jQuery and CSS extension for Bootstrap 4 framework that adds a smooth sliding animation to Bootstrap 4 dropdown menus using CSS3 transitions and transforms. How to use it: 1.

here is my solution for slide & fade effect:

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });

Adding a slide effect to bootstrap dropdown, In BS3, this code will give all of your dropdown menus the animation effect you are looking for: // Add slideDown animation to Bootstrap  The native way a dropdown will shoe in bootstrap (4.0) is not animated. Animate Dropdown Menu Bootstrap 4. Adding a slide effect to bootstrap dropdown.

Bootstrap 4 Navbar Dropdown Animations, Dropdown Menu Animation for Bootstrap Navbar. CSS Only, simple and attractive animated dropdown menu for Bootstrap 4 navbars. Built with. Bootstrap 4.3.1  The slideDown () method slides-down (shows) the selected elements. Note: slideDown () works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden). Tip: To slide-up (hide) elements, look at the slideUp () method. How to use the speed parameter to specify the speed of the slide effect.

Add smooth sliding animation to Bootstrap 4 dropdown menu, A CSS extension for Bootstrap 4 that adds a smooth sliding animation to Bootstrap 4 dropdown menus using CSS3 transitions and transform. Example Explained. The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon ( ), which indicates that the button is a dropdown. Add the .dropdown-menu class to

Bootstrap Snippet Slide dropdown navigation using HTML jQuery, Bootstrap example of Slide dropdown navigation using HTML, Javascript, jQuery, and CSS. to be able to add a web address location of the root of "Dropdown" is clicked. There´s a lot of menus but this has a pretty fancy yet effective effect ;). The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect. The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.

Comments
  • did u include the bootstrap-dropdown.js somewhere? i don't see it in the header.. and awwww these cakes. i'm so hungry now!
  • Hmm it's inside boostrap.js, I did include it but it didnt work so I removed it but i re-added it and yes if I remove the mini one, it wont work at all
  • EDIT: oh yeah, it's included.
  • Umm. The default dropdown doesn't slide; On the modified version (from the links), there is an $el.parent().slideToggle(); which calls a JQuery animation.
  • And btw i dun see why u include bootstrap 2 times. bootstrap.min.js is the minified version.
  • I'm having an issue with the slideUp portion of this. While in collapsed mode (Chrome), the width of the dropdown returns to the width as if being viewed in full screen. While using FF, it slides down, but hides instead of sliding up.
  • I too see this issue, I actually created another thread asking specifically about it... stackoverflow.com/questions/26267207/… but I don't know exactly how to fix it. I feel like the Dropdown class isn't waiting for the transition to finish before processing the hidden.bs.dropdown event.
  • this works and does what i desire, but on mobile viewport, the dropdown slideup for submenus disappears to fast and looks choppy - thanks for the share though!
  • I'm unable to get this to work. I keep getting the following error: "Uncaught TypeError: $(...).find(...).first(...).stop is not a function". I don't understand how .stop() is not a function unless the animation has somehow not started yet when the event is fired? What am I missing?
  • See Slipoch's answer further down for mobile fix.
  • Nice solution, appreciate it.