增加移动端菜单动画效果,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 { .main-content {
margin-left: 210px; margin-left: 210px;
transition: none;
} }
.main-content.open { .main-content.open {
display: unset; display: unset;
} }
aside {
transition: none;
transform: none;
top: 0;
right: auto;
}
} }
@media (min-width: 940px) { @media (min-width: 940px) {
@ -79,6 +87,24 @@
position: absolute; position: absolute;
overflow-y: auto; 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) { @media (max-height: 568px) {

View File

@ -134,6 +134,7 @@
} }
.main-content { .main-content {
transition: all .4s ease-in-out;
padding: 15px 15px 0 15px; padding: 15px 15px 0 15px;
margin-left: 0; margin-left: 0;
height: auto; height: auto;
@ -159,6 +160,22 @@
text-align: left; 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 { .sidebar {
display: none; display: none;
overflow-y: auto; overflow-y: auto;

View File

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

View File

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