Is it possible to get Twitter Bootstrap Dropdown menus to fade in?

Question

I am trying to get the standard navbar dropdown menu on Twitter Bootstrap to fade in instead of just appear. I have tried adding the classes fade and in but it doesn't appear to fade. Here is my fiddle http://jsfiddle.net/byronyasgur/5zr4r/10/.

I have tried going about it another way - eg the answer on this question but I'm having trouble targeting the dropdown trigger with jquery for some reason.

Solution 1

Playing around with this, it looks like CSS animations work the best.

.open > .dropdown-menu {
  animation-name: slidenavAnimation;
  animation-duration:.2s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

You can add other CSS properties in order to make more complicated animations. For example, I've been playing with left: -30 -> left: 0.

Solution 2

I'd like to submit a modern, CSS-only approach:

.dropdown-menu.fade {
  display: block;
  opacity: 0;
  pointer-events: none;
}
.open > .dropdown-menu.fade {
  pointer-events: auto;
  opacity: 1;
}

This allows .fade to handle the transition animation, but .open is what controls the opacity and pointer state.

Solution 3

Small tweak to Jason Featheringham's answer that works in Bootstrap 4.

.dropdown-menu.fade {
   display: block;
   opacity: 0;
   pointer-events: none;
}

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}

Solution 4

I found nice solution too:

// 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();
});

Example: http://codepen.io/danielyewright/pen/EvckL

Solution 5

Maybe doing something like this with jQuery:

$(function() {
    $('.dropdown-toggle').click(function() {
        $(this).next('.dropdown-menu').fadeToggle(500);
    });
});​

You can chek the fiddle here: http://jsfiddle.net/5zr4r/15/

UPDATE: I forgot to say that you should remove the fade in from the ul.

View more solutions

Comments

[byronyasgur]

Thanks yes that's a step in the right direction. It affects all dropdowns at the moment but I'm sure I can mod it with a $(this) somehow ... other problem is that it doesn't cancel when I click outside the area but I'm sure I can figure that out ... thanks

[Dim13i]

You're welcome! I've updated my answer so it affects only the right dropdown.

[byronyasgur]

Thanks ... actually though, while the code you posted works great for me, there might be something wrong with the rendering of the text here on stack overflow ... because when I copied the block it messed up the page, but when I just copied over the middle line it worked fine ... I think it has something to do with the last two lines, I cant figure it out but you might want to have a look at it under edit to see if there's any odd characters in the post. If you cant find it then I'm sure any future visitors can type over the last 2 lines rather than copy it anyway. Thanks again

[Dim13i]

I can't find anything wrong, maybe it's because I copied the code from jsfiddle...

[byronyasgur]

I wouldn't worry about it, I just thought I'd mention it in case someone was copying and pasting it in future... could have been something on my side either.

[byronyasgur]

Might as well post the full solution I got based on your answer and including some other stuff in case it's of any use to anyone else ... $(function() { var $dropdownMenu = $('.dropdown-menu'); $('.dropdown-toggle').click(function() { $dropdownMenu.not($(this).siblings('.dropdown-menu')).fadeO‌​ut(300); $(this).next('.dropdown-menu').fadeToggle(300); }); $(document).click(function(event) { if($(event.target).parents().index($dropdownMenu) == -1) { if($dropdownMenu.is(":visible")) { $dropdownMenu.fadeOut(300); } } }); });

[byronyasgur]

haven't got time to test this at the moment so sorry I don't want to give you the tick but it's great to see it seemingly can be done without javascript. Thanks

[War10ck]

Please explain how this solves the problem at hand to help future visitors to this question understand.

[Daniely Wright]

I've updated the code and explained better how it solves the problem by the OP.

[byronyasgur]

again I haven't tested this but from the votes it seems it must work and obviously css is preferable so I'm reawarding the tick

[Ejaz Karim]

I'm not sure why somebody doesn't test the solution what he needs.

[Yazan Rawashdeh]

Best answer , quick ,easy and effective :D

[Colin Oakes]

This answer is more effective than the chosen answer provided by @Benjamin. Just make sure you add the class ".fade" to the same element that the ".dropdown-menu" class is on. - It handles a fade in and fade out, the chosen one only fades in and just disappears immediately on close. - This answer is less code.

[ldavid]

In bootstrap 4, you must use .open > .dropdown-menu.fade

[Qasim]

For Bootstrap 4.3x, you have to change .open > .dropdown-menu { in the first line of this code, to .show > .dropdown-menu { Worked wonderfully!

[daGUY]

Heads up, this doesn’t work properly with keyboard navigation because you’re hiding the closed menus by setting the opacity to 0 instead of setting the display to none. So if you tab through with the keyboard, the focus will shift to the items in the closed menus whereas normally it would skip them.