本篇简单实现左右布局，可以用于后台框架，左侧菜单可以收缩和展开效果。
样式代码：
<style>
html,
body,
.h100 {
height: 100%;
}
div {
box-sizing: border-box;
}
.main,
.main-left,
.main-right {
height: 100%;
}
.main-left {
background: #16baaa;
position: fixed;
width: 200px;
overflow: hidden;
}
.main-right {
padding-left: 200px;
}
</style>
HTML代码：
<div class="main">
<div class="main-left">
<div>左侧-菜单区</div>
</div>
<div class="main-right">
<div>
<div style="padding: 10px; border-bottom: 1px solid #ddd;">
<a href="javascript:;" class="shrink">
<i class="layui-icon layui-icon-shrink-right"></i>
</a>
</div>
右侧-主体内容区
</div>
</div>
</div>
JS代码：
$('.shrink').on('click', function () {
var dw = 200, speed = 200, lw = $('.main-left').width();
if (lw > 0) {
$('.main-left').animate({ opacity: 0, width: '0px' }, speed);
$('.main-right').animate({ paddingLeft: '0px' }, speed);
$(this).html('<i class="layui-icon layui-icon-spread-left"></i>');
} else {
$('.main-left').animate({ opacity: 1, width: dw + 'px' }, speed);
$('.main-right').animate({ paddingLeft: dw + 'px' }, speed);
$(this).html('<i class="layui-icon layui-icon-shrink-right"></i>');
}
})
注意，本实例加入layui框架，使用了该框架样式，如不使用可以去掉自己写。
