公司最近在做一个视频直播的功能，里面有个页面样式是需要点击收起侧边栏的，整体效果如图：
那么如何制作呢，参考了网上的代码，我发现很简单，下面就是我制作的代码：
<section id="left" class="left cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left cbp-spmenu-open">
<a href="#" class="reback"> <span class="img"></span> <span class="title">返回</span>
</a>
<header class="hotcourse">
<span class="hotimg"> </span> <span class="title">热门直播频道</span>
</header>
<section class="middle-section">
<ul class="courses">
<li class="item">
<div class="item-img">
<img src="/resources/img/liveSupport/hotlive/rmfm_1.png"> <span class="img-top"></span>
</div>
<div class="item-title">
<span class="title-img"></span> <span class="title">快乐星猫入园培训会</span>
</div>
<div class="item-info">
<span class="user-icon"></span> <span class="user-name">余金枝</span> <span class="time-icon"></span> <span class="time-txt">2016-8-30 09:20</span>
</div>
</li>
<li class="item">
<div class="item-img">
<img src="/resources/img/liveSupport/hotlive/rmfm_2.png"> <span class="img-top"></span>
</div>
<div class="item-title">
<span class="title-img"></span> <span class="title">快乐星猫入园培训会</span>
</div>
<div class="item-info">
<span class="user-icon"></span> <span class="user-name">余金枝</span> <span class="time-icon"></span> <span class="time-txt">2016-8-30 09:20</span>
</div>
</li>
<li class="item">
<div class="item-img">
<img src="/resources/img/liveSupport/hotlive/rmfm_3.png"> <span class="img-top"></span>
</div>
<div class="item-title">
<span class="title-img"></span> <span class="title">快乐星猫入园培训会</span>
</div>
<div class="item-info">
<span class="user-icon"></span> <span class="user-name">余金枝</span> <span class="time-icon"></span> <span class="time-txt">2016-8-30 09:20</span>
</div>
</li>
<li class="item">
<div class="item-img">
<img src="/resources/img/liveSupport/hotlive/rmfm_4.png"> <span class="img-top"></span>
</div>
<div class="item-title">
<span class="title-img"></span> <span class="title">快乐星猫入园培训会</span>
</div>
<div class="item-info">
<span class="user-icon"></span> <span class="user-name">余金枝</span> <span class="time-icon"></span> <span class="time-txt">2016-8-30 09:20</span>
</div>
</li>
<li class="item">
<div class="item-img">
<img src="/resources/img/liveSupport/hotlive/rmfm_4.png"> <span class="img-top"></span>
</div>
<div class="item-title">
<span class="title-img"></span> <span class="title">快乐星猫入园培训会</span>
</div>
<div class="item-info">
<span class="user-icon"></span> <span class="user-name">余金枝</span> <span class="time-icon"></span> <span class="time-txt">2016-8-30 09:20</span>
</div>
</li>
</ul>
<div class="expancoll-left">
<span class="collbar"></span>
</div>
</section>
<footer class="showmore">
<a href="#" class="btn btn-default btn-red">更多直播...</a>
</footer>
</section>
/* General styles for all menus */
.cbp-spmenu {
background: #EDECEC;
position: fixed;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
width: 260px;
height: 100%;
top: 0;
z-index: 1000;
}
.cbp-spmenu-horizontal {
width: 100%;
height: 150px;
left: 0;
z-index: 1000;
overflow: hidden;
}
/* Vertical menu that slides from the left or right */
.cbp-spmenu-left {
left: -260px;
}
.cbp-spmenu-right {
right: -260px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-right.cbp-spmenu-open {
right: 0px;
}
/* Push classes applied to the body */
.cbp-spmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.cbp-spmenu-push-toright {
left: 260px;
}
.cbp-spmenu-push-toleft {
left: -260px;
}
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
$('.expancoll-left').click(function(e) {
var this$ = $(this);
//classie.toggle(this, 'active');
//classie.toggle(document.getElementById('left'), 'cbp-spmenu-open');
$('.left').toggleClass('cbp-spmenu-open')
if ($('.left').hasClass('cbp-spmenu-open')) {
this$.find('.expanbar').removeClass('expanbar').addClass('collbar')
} else {
this$.find('.collbar').removeClass('collbar').addClass('expanbar')
}
});
总结：
1、是通过css动画效果来制作的，再通过js切换css里面的class来动态监听点击时的效果
2、重点是class中的cbp-spmenu-open，和css中的transition: all 0.3s ease;