效果
出现
css部分
.content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out, margin .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out, margin .3s ease-in-out; transition: transform .3s ease-in-out, margin .3s ease-in-out; margin-left: 230px; z-index: 820 } @media (max-767px) { .content-wrapper{ margin-left: 0 } } @media (min-768px) { .sidebar-collapse .content-wrapper { margin-left: 0 } } @media (max-767px) { .sidebar-open .content-wrapper{ -webkit-transform: translate(147px, 0); -ms-transform: translate(147px, 0); -o-transform: translate(147px, 0); transform: translate(147px, 0) } } .content-wrapper{ min-height: 100%; background-color: #ecf0f5; z-index: 800 } /* 关键处 */ .main-sidebar{ position: absolute; top: 60px; padding-top: 0px; min-height: 100%; width: 145px; z-index: 810; -webkit-transition: -webkit-transform .3s ease-in-out, width .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out, width .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out, width .3s ease-in-out; transition: transform .3s ease-in-out, width .3s ease-in-out } /* 关键处 */ @media (max-767px) { .main-sidebar{ -webkit-transform: translate(-150px, 0); -ms-transform: translate(-150px, 0); -o-transform: translate(-150px, 0); transform: translate(-150px, 0) } } @media (min-768px) { .sidebar-collapse .main-sidebar{ -webkit-transform: translate(-150px, 0); -ms-transform: translate(-150px, 0); -o-transform: translate(-150px, 0); transform: translate(-150px, 0) } } @media (max-767px) { .sidebar-open .main-sidebar{ -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } }
html部分
<body> <div class="top"> <span class="sidebar-toggle glyphicon glyphicon-th-list category_list" aria-hidden="true"></span> </div> <!--中间--> <div id="" class="mid"> <!--中间左边--> <div id="" class="left main-sidebar"> main-sidebar </div> <!--中间右边--> <div id="" class="clear"> </div> <div id="" class="right content-wrapper"> content-wrapper </div> </div> </body>
jQuery部分
<script type="text/javascript">
//Enable sidebar toggle
$(document).ready(function() {
$('.sidebar-toggle').click(function() {
if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse');
} else {
$("body").addClass('sidebar-collapse');
}
if ($("body").hasClass('sidebar-open')) {
$("body").removeClass('sidebar-open').removeClass('sidebar-collapse');
} else {
$("body").addClass('sidebar-open');
}
});
$(".content-wrapper").click(function() {
if ($("body").hasClass("sidebar-open")) {
$("body").removeClass('sidebar-open');
}
});
});
</script>