Smooth closing animation in mobile Bootstrap menu drop-down

Question

I have drop-down lists in a Bootstrap 3 navbar-collapse that I want to animate smoothly upon opening and closing. Both the JavaScript and CSS animation solutions I found work great when viewing on a larger-width device. But when it's collapsed in mobile, closing a drop-down list looks awful. While it's collapsing, it goes back to looking like a standard drop-down list.

In this JSFiddle, try making the output window narrow so the menu collapses to mobile mode. Then, click the "hamburger" icon and open and close the "Some Stuff" drop-down. As you can see, it looks great when opening, but awful when closing. I've tried a lot of tinkering to no avail. Any idea on how this can be made smooth while in mobile mode?

NOTE: I prefer a CSS answer, but I'll use JavaScript if that's what it requires.

HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li>
          <div class="navbar-nav-divider"></div>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="margin-bottom: 0;">
                            Some Stuff <span class="caret"></span>
                        </a>
          <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

.dropdown .dropdown-menu {
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

.dropdown.open .dropdown-menu {
    -webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    -moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    -ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    -o-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
    transition: max-height 0.3s, opacity 0.2s, visibility 0s;

    max-height: 120px;
    opacity: 1;
    visibility: visible;
}

EDIT:

I can get around this by skipping the close animation while in mobile mode, so it at least doesn't look horrible. However, I'm not considering it a solution, just a workaround. To implement it, I made the first of my two CSS blocks look like this instead:

.dropdown .dropdown-menu {
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 768px) {
  .dropdown .dropdown-menu {
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
  }
}

Andrew Bone · Answer 1 · 2016-09-30T14:24:44.583

3

Add this to your CSS so it keeps its styles even when it's closed.

@media (max-width: 767px) {
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar-nav .dropdown-menu>li>a {
    padding: 5px 15px 5px 25px;
    color: #777;
  }
}

Here it is in action (Fiddle)

edited Sep 30 '16 at 14:24

answered Sep 30 '16 at 14:16

Andrew Bone

7,092
2
18
33

Thanks for the answer. There's a small bug – the padding on the `ul` creates a slight gap when it's all closed. I ended up figuring out my own way, but my solution only applies if you're working with the bootstrap LESS code, and results in a little bit less CSS needing to be processed. I'll accept your answer, as it's the simplest to implement and doesn't require modifying the LESS, but I'll post my own solution as a separate answer as well. – Jacob Stamm Sep 30 '16 at 20:41

Jacob Stamm · Accepted Answer · 2016-10-02T20:51:21.883

Use @AndrewBone's solution if you don't have access to the Bootstrap 3 LESS source code, as his answer is plug-and-play. My answer is slightly more performant, as it adds very little CSS, while making only a slight modification to the "root" styling.

Steps:

Go to navbar.less.
Find every reference of the selector .open .dropdown-menu and remove .open from it so that the selector only says .dropdown-menu. This will allow the CSS to apply to the mobile drop-down while it's opening and closing.

This solves the styling/animation issue, but it leaves behind a gap due to the padding in the ul.dropdown-menu element. We'll solve it by having zero padding on the ul only when it's not opened (:not(.open) .dropdown-menu) and animating that padding as well so it doesn't look jumpy.

Replace the custom CSS in the question with the following.

.navbar-nav .dropdown-menu {
    -webkit-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease;
    -moz-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease;
    -ms-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease;
    -o-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease;
    transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease;
    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}
.navbar-nav .dropdown.open .dropdown-menu {
    -webkit-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease;
    -moz-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease;
    -ms-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease;
    -o-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease;
    transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease;
    max-height: 120px;
    opacity: 1;
    visibility: visible;
}
.navbar-nav .dropdown:not(.open) .dropdown-menu {
    padding: 0 !important;
}

And that's it! Now we have smooth CSS animations in both mobile and full-screen modes with minimal extra CSS that needs to be processed.

Smooth closing animation in mobile Bootstrap menu drop-down

HTML

CSS

EDIT:

2 Answers2