How to animate menu slide up using css animations?

Question

I am working on a pure css based menu. I tried to create a slide up animation of the menu but couldn't get it to work. I looked at a lot of solutions online but none of them worked for my case.

Here's the laydown of my case.

The menu has a title and subitems (submenu). This menu will only be one level.
I need the height of the submenu to zap behind the menu title.
Since the number of sub items are dynamic I want to achieve this without using specific height.
transform: translateY seemed like a better option but the menu items are visible above the title.
I do not want the menu items to appear above the menu title and use translate or something similar.

I'm not sure if I'm on the right track or if I'm missing something elementary.

$(function() {
  $('.accordion-tabs__header').click(function() {
    $('.accordion-tabs__body').toggleClass('collapsed');
    $('.accordion-tabs__body').toggleClass('expanded');
  });
});

.accordion-tabs {
  position: relative;
  top: 2rem;
  width: 60%;
}
.accordion-tabs__header {
  transition-delay: 1s;
  display: flex;
  align-items: center;
  padding: 1rem 0.5rem;
  z-index: 10;
  position: relative;
  background-color: azure;
}
.accordion-tabs__header__title {
  margin: 0;
  padding: 0;
}
.accordion-tabs__body {
  position: absolute;
  width: 100%;
  transition: 200ms transform ease-in-out;
}
.accordion-tabs__body.expanded {
  z-index: 1;
  transform: translateY(0%);
}
.accordion-tabs__body.collapsed {
  z-index: 1;
  transform: translateY(-100%);
}

.accordion-tabs__body .accordion-tabs__body__link {
  display: flex;
  align-items: center;
  padding: 0.875rem;
  background-color: antiquewhite;
}

.accordion-tabs__body .accordion-tabs__body__link a{
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="accordion-tabs">
    <div class="accordion-tabs__header">
      <div class="accordion-tabs__header__title">Menu Title Looong</div>
    </div>
    <div class="accordion-tabs__body collapsed">
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item Three</a></div>
    </div>
  </div>
</div>

Here's the codepen to my code - https://codepen.io/flexdinesh/pen/VybwwE

You cannot animate it properly with auto-height. You could animate max-height and set a max-height of the menu. See this: https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Phiter, Dec 29 '17 at 12:59
@Phiter I tried max-height. It works as expected but the animation takes a while to trigger in React-Redux. Should have something to do with virtual dom in react and max-height. — Dinesh Pandiyan, Dec 29 '17 at 13:12
If you don't mind setting a fixed height you can use it with overflow-hidden. — Phiter, Dec 29 '17 at 13:29
@Phiter That's the thing. The sub items can be of any number. The height cannot be fixed. — Dinesh Pandiyan, Dec 29 '17 at 13:45
@Phiter - max-height was the only solution that worked. It's not perfect in React but it works atleast. Thanks! :) — Dinesh Pandiyan, Jan 02 '18 at 09:12

score 0 · Accepted Answer · answered Jan 02 '18 at 09:08

I managed to achieve this with max-height.

Slide-up animation was a bit slow to trigger when I used this code in react. However I made it look okay with ease-out transition.

$(function() {
  $('.accordion-tabs__header').click(function() {
    $('.accordion-tabs__body').toggleClass('collapsed');
    $('.accordion-tabs__body').toggleClass('expanded');
  });
});

.accordion-tabs {
  position: relative;
  top: 2rem;
  width: 60%;
}
.accordion-tabs__header {
  transition-delay: 1s;
  display: flex;
  align-items: center;
  padding: 1rem 0.5rem;
  position: relative;
  background-color: azure;
}
.accordion-tabs__header__title {
  margin: 0;
  padding: 0;
}
.accordion-tabs__header.expanded {
  border-bottom: none;
}
.accordion-tabs__body {
  overflow: hidden;
  position: absolute;
  width: 100%;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
.accordion-tabs__body.expanded {
  max-height: 100vh;
  transition: max-height 500ms ease-in;
}
.accordion-tabs__body.collapsed {
  max-height: 0;
  transition: max-height 200ms ease-out;
}
.accordion-tabs__body__link {
  display: flex;
  align-items: center;
  padding: 0.875rem;
  border-top-width: 1px;
  border-top-style: solid;
  background-color: antiquewhite;
}
.accordion-tabs__body__link a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="accordion-tabs">
    <div class="accordion-tabs__header">
      <div class="accordion-tabs__header__title">Menu Title Looong</div>
    </div>
    <div class="accordion-tabs__body collapsed">
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item Three</a></div>
    </div>
  </div>
</div>

Here's the updated codepen that works - https://codepen.io/flexdinesh/pen/VyWzKo

How to animate menu slide up using css animations?

1 Answers1