Bootstrap multilevel dropdown slide effect?

Question

I have a multilevel dropdown in a Bootstrap project I made. I need it to be so that the dropdowns would slide. How am I to accomplish that?

I have the following code done, but I need to add to it. Here's what the code does:

• It opens and closes the specific dropdown if you click its dropdown toggle.
• If you click outside the dropdown, but inside its parent, only the child dropdown will close; and if you click outside the parent, the parent will close, and so on.
• If you click on the dropdown toggle of a child dropdown, it will only affect that dropdown and its children, not its parents.

I've read onto this answer to try and use it with my current solution, but I don't know how to get it to work properly: https://stackoverflow.com/a/19339162/1934402

I'm sure it does more specifications, but you get the idea. Here is a jsfiddle I made, too: http://jsfiddle.net/hhb9u7db/

For an example, I made the Collections link be a dropdown with T-shirts as another dropdown. I want it all to work exactly like how I have it working now, except that it slides.

$(function() {
    $('.dropdown').on({
        "click": function(event) {
          if ($(event.target).closest('.dropdown-toggle').length && $(this).parents('.dropdown').length === ($(event.target).parents('.dropdown').length - 1)) {
            $(this).data('closable', true);
          } else {
              $(this).data('closable', false);
          }
        },
        "hide.bs.dropdown": function(event) {
          hide = $(this).data('closable');
          $(this).data('closable', true);
          return hide;
        }
    });
});

Answer 1

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