制作侧边栏显示和隐藏效果

公司最近在做一个视频直播的功能，里面有个页面样式是需要点击收起侧边栏的，整体效果如图：

那么如何制作呢，参考了网上的代码，我发现很简单，下面就是我制作的代码：

<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;

参考地址：http://www.htmleaf.com/Demo/20141114477.html