製做側邊欄顯示和隱藏效果

公司最近在作一個視頻直播的功能，裏面有個頁面樣式是須要點擊收起側邊欄的，總體效果如圖：

那麼如何製做呢，參考了網上的代碼，我發現很簡單，下面就是我製做的代碼：

<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')
        }
    });

總結：

一、是經過css動畫效果來製做的，再經過js切換css裏面的class來動態監聽點擊時的效果

二、重點是class中的cbp-spmenu-open，和css中的transition: all 0.3s ease;

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