增加移动端菜单动画效果,768宽度以上的没有动画效果

This commit is contained in:
Argo-Lenovo 2017-03-27 12:57:47 +08:00
parent 00a073c7fe
commit 94ac9feff7
4 changed files with 48 additions and 8 deletions

View File

@ -48,11 +48,19 @@
.main-content {
margin-left: 210px;
transition: none;
}
.main-content.open {
display: unset;
}
aside {
transition: none;
transform: none;
top: 0;
right: auto;
}
}
@media (min-width: 940px) {
@ -79,6 +87,24 @@
position: absolute;
overflow-y: auto;
}
.main-content {
position: fixed;
overflow: auto;
transition: none;
}
.main-content.open {
display: block;
}
aside {
top: 0;
}
.aside.open {
transform: translate(0);
}
}
@media (max-height: 568px) {

View File

@ -134,6 +134,7 @@
}
.main-content {
transition: all .4s ease-in-out;
padding: 15px 15px 0 15px;
margin-left: 0;
height: auto;
@ -159,6 +160,22 @@
text-align: left;
}
aside {
transition: transform .4s ease-in-out;
transform: translate(-100%);
height: 100%;
position: absolute;
top: 94px;
bottom: 40px;
left: 0;
right: 0;
z-index: 5;
}
aside.open {
transform: translate(0);
}
.sidebar {
display: none;
overflow-y: auto;

View File

@ -39,9 +39,4 @@
.header, .site-footer {
position: fixed;
}
.main-content {
position: fixed;
overflow: auto;
}
}

View File

@ -77,11 +77,13 @@ $(function () {
$('.sidebar-toggle-box').on('click', function () {
if ($sidebar.is(":visible") === true) {
$sidebar.hide();
$main.addClass('closed').removeClass('open');
$sidebar.parent().toggleClass('open')
$(window).width() <= 768 ? setTimeout(function () { $sidebar.hide() }, 400) : $sidebar.hide();
} else {
$sidebar.show();
$main.addClass('open').removeClass('closed');
$sidebar.show()
$sidebar.parent().toggleClass('open')
$(window).width() <= 768 ? setTimeout(function () { $main.addClass('open').removeClass('closed') }, 400) : $main.addClass('open').removeClass('closed');
}
});