Search code examples
javascripthtmljquerycssdropdown

Add an effect to multi dropdown with submenus

I have a multi dropdown with submenus in a vertical navbar. I'm using Bootstrap 3 and JQuery for this element, I want to add an effect on each list, here is an example:

$('.dropdown').click(function(e) {
  e.stopPropagation();
  $(this).toggleClass('open');
});

$('.dropdown-submenu').click(function(e) {
  e.stopPropagation();
  $(this).find('.dropdown-menu').toggleClass('shown');
});
.sidebar-nav .dropdown-menu {
            position: relative;
            width: 100%;
            padding: 0;
            margin: 0;
            border-radius: 0;
            border: none;
            background-color: #FFF;
            box-shadow: none;
        }

        .sidebar-nav .dropdown-submenu {
            position: relative;
            width: 100%;
            padding: 0;
            margin: 0;
            border-radius: 0;
            border: none;
            background-color: #FFF;
            box-shadow: none;
        }

        .shown{
            display: block !important;
        }

        .dropdown-submenu .dropdown-menu{background: #CCC;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <ul class="nav sidebar-nav">
        <li>
            <a href="#">Option 1</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option 2 <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Option 2.1.</a></li>
            <li><a href="#">Option 2.2.</a></li>
            <li><a href="#">Option 2.3.</a></li>
            <li class="dropdown-submenu">
                <a href="#">Option 2.4. <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Option 2.4.1</a></li>
                    <li><a href="#">Option 2.4.2</a></li>
                    <li><a href="#">Option 2.4.3</a></li>
                </ul>
            </li>
            <li class="dropdown-submenu">
                <a href="#">Option 2.5. <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Option 2.4.1</a></li>
                    <li><a href="#">Option 2.4.2</a></li>
                    <li><a href="#">Option 2.4.3</a></li>
                </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown">
            <a href="#">Option 3 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Option 3.1.</a></li>
                <li><a href="#">Option 3.2.</a></li>
                <li><a href="#">Option 3.3.</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Option 4</a>
        </li>
    </ul>

The problem is when I click on menus I want each list has a fade effect from bottom to top, I tried add this on the first dropdowns:

.sidebar-nav .dropdown-menu { opacity: 0;
    transform:translateY(60px);
    transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) 0.075s,opacity 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s; }
.sidebar-nav .dropdown-menu.open .dropdown-menu{opacity: 1;transform:translateY(0px);}

But it doesn't work. How can I fix it?

I'd like your help

Solution

  • Use CSS animation with keyframes for the fadeIn and slide. @keyframe --> from, set opacity to 0 and set a transform for Y to transform: translateY(30px);. Then at the @keyframe --> 100% set opacity to 1 and then transform translateY to transform: translateY(0px);. Set overflow to hidden on your drop-downs as well. When the fadeIn animation starts at 0% it will be fully opaque and starting Y position at 30px animating from that position to 0px position and fully opaque at 100% of the animation sequence.

    You can also use from or 0% and to or %100 in the @keyframes animation sequence.

    .sidebar-nav .dropdown-menu, .sidebar-nav .dropdown-submenu {
  animation: fadeIn ease .7s;
  -webkit-animation: fadeIn ease .7s;
  -moz-animation: fadeIn ease .7s;
  -o-animation: fadeIn ease .7s;
  -ms-animation: fadeIn ease .7s;
   overflow-y: hidden;
}

@keyframes fadeIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}


    $('.dropdown').click(function(e) {
  e.stopPropagation();
  $(this).toggleClass('open');
});

$('.dropdown-submenu').click(function(e) {
  e.stopPropagation();
  $(this).find('.dropdown-menu').toggleClass('shown');
});
    .sidebar-nav .dropdown-menu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
  animation: fadeIn ease-in-out .5s;
  -webkit-animation: fadeIn ease-in-out .5s;
  -moz-animation: fadeIn ease-in-out .5s;
  -o-animation: fadeIn ease-in-out .5s;
  -ms-animation: fadeIn ease-in-out .5s;
   overflow: hidden;
}

.sidebar-nav .dropdown-submenu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
  animation: fadeIn ease-in-out .5s;
  -webkit-animation: fadeIn ease-in-out .5s;
  -moz-animation: fadeIn ease-in-out .5s;
  -o-animation: fadeIn ease-in-out .5s;
  -ms-animation: fadeIn ease-in-out .5s;
   overflow: hidden;
}

.shown {
  display: block !important;
}

.dropdown-submenu .dropdown-menu {
  background: #CCC;
}

@keyframes fadeIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<ul class="nav sidebar-nav">
  <li>
    <a href="#">Option 1</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option 2 <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Option 2.1.</a></li>
      <li><a href="#">Option 2.2.</a></li>
      <li><a href="#">Option 2.3.</a></li>
      <li class="dropdown-submenu">
        <a href="#">Option 2.4. <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Option 2.4.1</a></li>
          <li><a href="#">Option 2.4.2</a></li>
          <li><a href="#">Option 2.4.3</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="#">Option 2.5. <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Option 2.4.1</a></li>
          <li><a href="#">Option 2.4.2</a></li>
          <li><a href="#">Option 2.4.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Option 3 <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Option 3.1.</a></li>
      <li><a href="#">Option 3.2.</a></li>
      <li><a href="#">Option 3.3.</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Option 4</a>
  </li>
</ul>