0

So for the regular bootstrap drop down menu, I want to customize it so that it'd have a sliding animation and to display horizontally, both at the same time. I found a solution for the former:

// Add slideDown animation to dropdown
$('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

// Add slideUp animation to dropdown
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

and the latter:

.dropdown-menu > li{
  display: inline-block;
  float:left;
}
.open> ul {
  display: inline-flex !important;
}

But when I tried to combine both solutions things went wrong.

In the milliseconds that the animation happens when opening the drawer, the height of the menu is larger than it should be, and likewise the width of the dropdown menu shrinks when closing the drawer. It seems that this should be solved easily after overriding a height somewhere, but I'm unsure as to what class this is exactly. Is it even possible to have both these features on the same drawer, in any case?

Community
  • 1
  • 1
Ana Ameer
  • 671
  • 11
  • 30

1 Answers1

1

For the height: you can override the height in the css with max-height.

The problem, why the dropdown-menu shrinks before fully closing is the css class of bootstrap for display, which gets rendered already before the sliding action is triggered. A work-around is to manually override the display style to display: inline flex (as it is when the menu is open).

Your updated fiddle can be found here.

I hope this helps...

nicost
  • 1,022
  • 2
  • 11
  • 27
  • Thank you! But is it not possible for the height issue to be arranged without specifying a fixed max-height? Suppose I will have to deal with dynamic items (like image) and I won't know how large the dropdown needs to be... – Ana Ameer Apr 22 '16 at 02:06
  • I get the point, and I know it's not a perfect solution... I'm sorry though, I can't find any idea at the moment... :/ The cause is, that the display stye "inline-flex" (which makes the
  • element floating on one page) gets rendered too late, taking the height as the display would be "block" (
  • elements underneath each other) for the reference to transition. you could try to manually buid your transition like its done here: http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu
    • – nicost Apr 22 '16 at 02:49