Bootstrap CSS dropdown-menu Animation

Question

I'm trying to animate my dropdown-menu via CSS to show fade-in and fade-out animations. I'm using bootstrap, which manages my navbar and their fade-in and fade-out on mobile devices. Via CSS, I was able to animate the fade-in animation for the dropdown-menus inside the navbar. But, when collapsing these menus, there's no animation at all. I also made a video of this behavior: https://youtu.be/YcWzsH5aKbw

JSFiddle: https://jsfiddle.net/mvhvcuo9/2/ You have to reduce the output view till the navbar collapses because the error I have is just present in collapsed mode. The collapse button is currently black, but this does not change anything at the behaviour.

My CSS & HTML:

.dropdown .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdown.open .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  max-height: 190px;
  display: block;
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<nav class="navbar navbar-custom" "="">
  <div class="container-fluid"> 
  <div class="navbar-header"> 
  <button style="background: url(https://cdn.pixabay.com/photo/2016/04/27/16/16/generic-button-1357003_960_720.png)" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
  <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> 
  <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">censor</a> </div>
  <div id="navbar" class="collapse navbar-collapse"> <a href="http://censor.censor.censor-censor.de/index.htm" target="_blank"><button type="button" class="btn btn-warning navbar-right"> censor</button></a> <ul class="nav navbar-nav"><li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <ul> </ul></ul></div> </div> </nav>
</nav>
</div>
</div>
</body>
     </nav>

EDIT: @Chiller's answer is great, but it missed a little thing. To have your dropdown menu correctly closed when pressing outside of it or collapsing the navbar, you have to add the following Javascript code (jQuery):

$(document).click(function(){
  $(".dropdown-menu").slideUp(300);
});

$(".dropdown-menu").click(function(e){
  e.stopPropagation();
});

@Chiller: The things you changed - they did not do anything exept syntax correction, right? Still having my issue :( — eric.mayer
– eric.mayer, Commented May 5, 2017 at 18:31
I just made a snippet for me and others to see what you got so far.. but it doesn't show the problem like the video you put.. i suggest that you make a snippet that shows clearly the problem you have — Chiller
– Chiller, Commented May 6, 2017 at 19:20
Okay, thank you! I was able to reproduce my problem with JSFiddle. Here it is: jsfiddle.net/mvhvcuo9 — eric.mayer
– eric.mayer, Commented May 7, 2017 at 20:50
Now it is also working in the code snipped here on the site. No need for jsfiddle any longer. — eric.mayer
– eric.mayer, Commented May 7, 2017 at 20:57

Chiller · Accepted Answer · 2017-05-08 10:05:05Z

1

I manged to create a custom slideUp/slideDown function to achieve the goal

See snippet below:

$('.navbar-nav a').on('click', function() {
 
  $('.dropdown').children('.dropdown-menu').slideUp(300);
  
  if ($(this).parent().hasClass("open")) {
    $(this).next('.dropdown-menu').slideUp(300);
  } else {
    $(this).next('.dropdown-menu').slideDown(300);
  }

});

@media screen and (max-width: 767px) {
  .navbar-nav .dropdown-menu {
    display: none;
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .dropdown-menu>li>a {
    color: #777!important;
    padding: 5px 15px 5px 25px!important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>

          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>

      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

answered May 8, 2017 at 10:05

Chiller

9,7362 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

eric.mayer Over a year ago

It's working perfect, thank you so much! One question: How can I let close all dropdown menus inside the navbar when closing the navbar? If you do this at the moment, the animation is a little bugged. Thanks! :) Can't upvote btw, too little reputation :(

eric.mayer Over a year ago

I realized I may have described a bit incomprehensible. 1. Open navbar, open one dropdown menu 2. Collapse navbar, then open the navbar again (dropdown menu still opened) 3. Press on opened dropdown menu (it will close and open again) If the dropdown menu would collapse together with the navbar, the problem would not be present I think. Maybe you have got another great idea?

eric.mayer Over a year ago

I just noticed, your solution also fixed another problem I had with the dropdown menus: On mobile max. 5 items were displayed, on desktop max. 6. Now are all items displayed :) Btw, the thing I described above, I think this is related - Making the dropdown-menu collapse when clicking anywhere outside of it (desktop). Is this the same?

eric.mayer Over a year ago

Anyway, I think I figured it out myself (see above) :)

Chiller Over a year ago

@Scunkaneli Since its a custom function ... there will be some stuff that needs to be add to work perfectly .. anyway i believe you managed to resolve the issue, and i'm glad it helped :) ... i will upvote you instead then :p

|

Collectives™ on Stack Overflow

Bootstrap CSS dropdown-menu Animation

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related