I have designed a simple accordion menu using jQuery and CSS transition to display submenus. Here is an example:
HTML:
<div class="container">
<ul class="nk-menu list-unstyled" id="side-menu">
<li class="nk-menu-item has-sub">
<a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
<span class="nk-menu-text">First</span>
</a>
<ul class="nk-menu-sub">
<li class="nk-menu-item">
<a class="nk-menu-link" href="">
<span>Sub 1</span>
</a>
</li>
</ul>
</li>
<li class="nk-menu-item has-sub">
<a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
<span class="nk-menu-text">Second</span>
</a>
</li>
</ul>
</div>
jQuery:
$(document).on('click', '.nk-menu-toggle', function(e) {
e.preventDefault();
let $this = $(this);
if ($this.parent().hasClass('active')) {
$this.parent().removeClass('active');
} else {
$('.nk-menu').find('li').removeClass('active');
$this.closest('li').toggleClass('active');
}
});
CSS:
.nk-menu-sub {
border-top: 1px solid #2a4163;
background: #8FBC8F;
padding: 0px 15px;
margin: 0 0 7px 0;
height: 0;
overflow: hidden;
z-index: -1;
position: relative;
opacity: 0;
-webkit-transition: .7s ease;
-moz-transition: .7s ease;
-o-transition: .7s ease;
transition: .7s ease;
}
.active>.nk-menu-sub {
height: 50px; // change this line to 100%
opacity: 1;
padding: 15px;
}
In practice, this code works well with a fixed size like 50px for the submenu, but when I try to change the height to 100% for dynamic content in .active>.nk-menu-sub, the CSS transition doesn't function smoothly and there is delay.
How can I fix this issue?
View demo HERE