0

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.

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4" id="collapseExample">
      <a class="navbar-brand" href="#">Top navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <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">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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</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</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>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
/* Show it's not fixed to the top */
body {
  min-height: 75rem;
}

/* Slidenav 4.1.0-alpha.2 ( https://github.com/tightcode/slidenav ) */
.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);
  }
}
RUN
add comment
Suggest a different solution or add another example