Когда открыто меню и панель с подкатегориями, при закрытии панель с подкатегориями исчезает быстрее.
- Как синхронизировать анимацию скрытия панелей моб. меню?
- Из за чего они скрываются с разной скоростью если у всех стоит одинаковый duration?
- Почему при загрузке страницы происходит анимация?
$('.trigger-menu').on('click', function() {
$('body').toggleClass('menu-open');
});
$('.bg').on('click', function() {
$("#mobile-menu-trigger:checked,.menu-inner-trigger:checked").prop("checked", false).change();
$('body').toggleClass('menu-open');
});
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: auto;
margin: auto;
padding: 15px;
overflow: hidden;
border: 1px solid lightgrey;
position: relative;
height: 300px;
}
.mobile-menu {
width: 80%;
max-width: 300px;
position: fixed;
top: 0;
right: auto;
bottom: 0;
animation-name: slidemenuback;
animation-duration: 0.3s;
animation-timing-function: easy-in-out;
animation-fill-mode: forwards;
transform: translateX(-100%);
left: 0;
z-index: 5;
box-shadow: 3px 0 4px lightgrey;
background: #fff;
}
.mobile-menu__header {
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #ff4081;
background: #fff;
}
.mobile-menu__logo-wrapper {
width: 150px;
margin: 0 auto;
}
.mobile-menu__list {
width: 100%;
height: 100%;
}
.mobile-menu__item {
border-bottom: 1px solid lightgrey;
}
.mobile-menu__link {
padding: 5px;
display: block;
}
.mobile-menu__inner {
background: #f78a8a;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: auto;
bottom: 0;
transform: translateX(-100%);
animation-name: slidemenuback;
animation-duration: 0.3s;
animation-timing-function: easy-in-out;
animation-fill-mode: forwards;
}
#mobile-menu-trigger:checked + .mobile-menu {
animation-name: slidemenu;
animation-duration: 0.3s;
animation-timing-function: easy-in-out;
animation-fill-mode: forwards;
}
input[data-menu="menu"]:checked + .mobile-menu__inner {
animation-name: slidemenu;
animation-duration: 0.3s;
animation-timing-function: easy-in-out;
animation-fill-mode: forwards;
}
.display-hidden {
display: none;
}
.trigger-menu {
background: #91a2f7;
float: right;
}
.bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 1;
visibility: hidden;
opacity: 0;
}
.menu-open .bg {
opacity: 1;
visibility: visible;
}
.logo {
width: 100%;
height: auto;
}
.menu-back-trigger {
border-bottom: 1px solid #ff4081;
}
@keyframes slidemenu {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slidemenuback {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label class="trigger-menu" for="mobile-menu-trigger">Trigger</label>
<input id="mobile-menu-trigger" class="display-hidden" type="checkbox">
<nav class="mobile-menu">
<header class="mobile-menu__header">
<div class="mobile-menu__logo-wrapper">
</div>
</header>
<ul class="mobile-menu__list">
<li class="mobile-menu__item">
<label class="mobile-menu__link" for="menu-inner-trigger-1">Category</label>
<input id="menu-inner-trigger-1" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu">
<div class="mobile-menu__inner">
<label class="mobile-menu__link menu-back-trigger" for="menu-inner-trigger-1">Category</label>
<ul class="mobile-menu__inner-list">
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category2
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category3
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category4
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category5
</a>
</li>
</ul>
</div>
</li>
<li class="mobile-menu__item">
<label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label>
<input id="menu-inner-trigger-2" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu">
<div class="mobile-menu__inner">
<label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label>
<ul class="mobile-menu__inner-list">
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category2
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category3
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category4
</a>
</li>
<li class="mobile-menu__inner-item">
<a href="#" class="mobile-menu__link">
Inner category5
</a>
</li>
</ul>
</div>
</li>
<li class="mobile-menu__item">
<a href="#" class="mobile-menu__link">
Delivery
</a>
</li>
<li class="mobile-menu__item">
<a href="#" class="mobile-menu__link">
About
</a>
</li>
</ul>
</nav>
<div class="bg"></div>
</div>
animation-timing-function: linear
. А исчезает по-разному потом, что ширина подменю меньше чем самого меню