CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Ana Ameer
Ana Ameer

Reputation: 681

Bootstrap horizontal drop down menu with sliding animation

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?

Upvotes: 0

Views: 868

Answers (1)

nicost
nicost

Reputation: 1040

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...

Upvotes: 1

Related Questions