增加移动端菜单动画效果,768宽度以上的没有动画效果
This commit is contained in:
parent
00a073c7fe
commit
94ac9feff7
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -39,9 +39,4 @@
|
|||
.header, .site-footer {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue