Add Smooth Sliding Animation To Bootstrap 4 Dropdown Menu

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. Add the CSS class collapse to the dropdown menus.

<div class="collapse navbar-collapse" id="navbarCollapse">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="collapse" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#dropdown-menu01">Dropdown 1</a>
      <div>
        <div id="dropdown-menu01" class="dropdown-menu collapse" aria-labelledby="dropdown01" data-parent="#collapseExample">
          <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>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="collapse" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#dropdown-menu02">Dropdown 2</a>
      <div>
        <div id="dropdown-menu02" class="dropdown-menu collapse" aria-labelledby="dropdown02" data-parent="#collapseExample">
          <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>
    </li>
  </ul>
</div>

2. The necessary CSS/CSS3 rules for the smooth sliding animation.

.dropdown-menu.collapsing {
  display: block;
}

@media (max-width: 767.98px) {
  .dropdown-menu {
    padding: 0;
    margin-top: 0!important;
    border: 0!important;
  }
  .dropdown-menu:before {
    content: "";
    display: block;
    padding-top: .5rem;
  }
  .dropdown-menu:after {
    content: "";
    display: block;
    padding-bottom: .5rem;
  }
}

@media (min-width: 768px) {
  .dropdown>div {
    position: absolute;
    clip: rect(0.5rem, 9999px, 9999px, -9999px);
  }
  .dropdown-menu {
    height: auto!important;
    transition: transform .35s ease!important;
  }
  .dropdown-menu.collapse, .dropdown-menu.sliding {
    transform: translate(0, -100%);
  }
  .dropdown-menu.collapse:not(.show) {
    display: block;
  }
  .dropdown-menu.collapse.show {
    transform: translate(0, 0);
  }
}

3. The JavaScript to hide the dropdown menu after a menu item is clicked. Just copy and place the JS snippets after jQuery & Bootstrap libraries. That's it.

$(".dropdown").on("hide.bs.collapse", function() {
  $(this).find(".dropdown-menu").first().addClass( "sliding" )
});
$(".dropdown").on("hidden.bs.collapse", function() {
  $(this).find(".dropdown-menu").first().removeClass( "sliding" )
});
$(document).click(function() {
  $(".dropdown-menu.collapse.show").collapse("hide");
});

Changelog:

2019-06-05

 

---

This awesome jQuery plugin is developed by tightcode. For more Advanced Usages, please check the demo page or visit the official website.