How to animate menu slide up using css animations? - html

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

Answer 1

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