1

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;
        }
    });
});
Community
  • 1
  • 1
yaserso
  • 2,638
  • 5
  • 41
  • 73

1 Answers1

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

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • I'm sorry I forgot about adding the `.navbar` class to the navbar, but the menus shouldn't have `.navbar-nav` as they are justified pills. I was hoping for a JS solution rather than a CSS one, since I'm aiming to make it compatible up to IE 8. I'll still mark your answer the right one since I didn't specify wanting a JS solution except through the tags, maybe. Let me know if you've figured out a JS solution, though. Thanks! – yaserso Jan 06 '15 at 06:57
  • 1
    Well, okay. I wonder if you could do this without changing the BS plugin. BS does not support nesting of dropdowns. I thought you possible add level classes in your HTML and then use something like ` $('.dropdown.level1, .dropdown.level2, .dropdown.level3').on('show.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }); // ADD SLIDEUP ANIMATION TO DROPDOWN // $('.dropdown.level1, .dropdown.level2, .dropdown.level3').on('hide.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); });` – Bass Jobsen Jan 06 '15 at 12:24
  • 1
    also the above, still hides the parent when closing a child, probably due to hard code class names inside the plugin code. You could possible consider to apply graceful degradation or only first level sliding. – Bass Jobsen Jan 06 '15 at 12:28
  • Hahaha, exactly what I ran into. I came into the same conclusion. Came up with code that hides the the parents when you try to hide the children. I was hoping you'd find a way to solve it. You are right. Bootstrap 3 does not support nested dropdowns. I even tried a plugin that supposedly enables nested dropdowns, but it didn't work, which had me try and do this code instead. Alas, thank you! I'll just have to do without the sliding for older browsers. – yaserso Jan 06 '15 at 12:46