15

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.

Community
  • 1
  • 1
byronyasgur
  • 4,627
  • 13
  • 52
  • 96

6 Answers6

30

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.

Benjamin Kahn
  • 332
  • 3
  • 3
  • 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 – byronyasgur Mar 20 '13 at 18:07
  • 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 – byronyasgur Jan 03 '15 at 13:10
  • 2
    I'm not sure why somebody doesn't test the solution what he needs. – Ejaz Karim Jan 10 '16 at 16:12
  • 1
    For Bootstrap 4.3x, you have to change `.open > .dropdown-menu {` in the first line of this code, to `.show > .dropdown-menu {` Worked wonderfully! – Qasim May 03 '19 at 11:53
17

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.

Jason
  • 3,379
  • 25
  • 32
  • Best answer , quick ,easy and effective :D – Yazan Rawashdeh Jan 11 '16 at 07:46
  • 1
    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. – Colin Oakes Jul 21 '16 at 20:19
  • In bootstrap 4, you must use `.open > .dropdown-menu.fade` – ldavid Dec 13 '18 at 17:11
9

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;
}
Stu
  • 91
  • 1
  • 2
  • 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. – daGUY Jun 11 '20 at 16:37
6

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.

Dim13i
  • 1,961
  • 1
  • 17
  • 20
  • 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 – byronyasgur Dec 12 '12 at 00:50
  • You're welcome! I've updated my answer so it affects only the right dropdown. – Dim13i Dec 12 '12 at 00:56
  • 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 – byronyasgur Dec 12 '12 at 01:08
  • I can't find anything wrong, maybe it's because I copied the code from jsfiddle... – Dim13i Dec 12 '12 at 01:19
  • 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 Dec 12 '12 at 01:44
  • 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')).fadeOut(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 Dec 12 '12 at 01:48
6

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

Nerjuz
  • 1,063
  • 12
  • 17
0

You can try this:

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

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

It utilizes Bootstrap's existing show.bs.dropdown and hide.bs.dropdown functions and changes the dropdown effect to "fade" in instead of "appear". You can also change fadeToggle() to slideDown() if you want a "slide" in effect. Hope this helps.

Here is the fiddle: http://jsfiddle.net/ck5c8/

Daniely Wright
  • 31
  • 3