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