CSS3 | Bootstrap | jQuery

效果圖

桌面視口

移動終端視口

HTML

<nav></nav>
<button type="button" id="slide-menu-show" class="btn btn-default front-slidemenu-btn visible-xs-block"><span class="glyphicon glyphicon-arrow-right"></span></button>
<div class="container">
    <div class="row front-slide-menu" id="whole-canvas">
        <div class="col-xs-9 col-md-3 front-leftside-menu" id="slide-menu">
            <div class="front-list-group">
      <a href="#" class="front-list-group-item">首頁<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                <a href="#" class="front-list-group-item">群組<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
      <a href="#" class="front-list-group-item front-active">我的<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
      <div class="front-list-group front-leftside-second-menu">
        <a href="#" class="front-list-group-item">我的收藏<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
        <a href="#" class="front-list-group-item">我的分享<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
        <a href="#" class="front-list-group-item">我的草稿<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
        <a href="#" class="front-list-group-item">我的消息<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
      </div>
                <a href="#" class="front-list-group-item">消息<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                <a href="#" class="front-list-group-item">聯系人<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
            </div>
        </div>
        <div class="col-xs-12 col-md-9">
        長夜將至，我從今開始守望，至死方休。我將不娶妻，不封地，不生子。我將不戴寶冠，不爭榮寵。我將盡忠職守，生死于斯。我是黑暗中的利劍，長城上的守衛(wèi)，抵御寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護王國的堅盾。我將生命與榮耀獻給守夜人，今夜如此，夜夜皆然。 
        </div>
    </div>
</div>

CSS

.front-list-group {
  padding-left: 0;
}
.front-list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
a.front-list-group-item {
    color: #555;
    text-decoration: none;
}
a.front-list-group-item:not(.front-active):hover,
a.front-list-group-item:not(.front-active):focus {
    color: #555;
    text-decoration: none;
    background-color: #f5f5f5;
}
a.front-active {
    background-color: #337ab7;
    border-color: #337ab7;
    color: #fff;
}
.front-leftside-second-menu {
    display: none;
    border: 1px solid #3378bc;
}
.front-leftside-second-menu>a {
    border: none;
    margin-bottom: 0;
}
.front-leftside-second-menu>.list-group {
    margin-bottom: 0;
}
.front-leftside-second-menu>.list-group>.list-group-item {
    border-radius: 0;
}
.front-leftside-second-menu>.list-group>.list-group-item:last-child {
    border-bottom: none;
}
@media (max-width: 767px) {
    .front-slide-menu {
        position: relative;
        right: 0;
        transition: all .25s ease-out;
    }
    .front-slide-menu.active {
        right: -75%;
    }
    .front-leftside-menu {
        position: absolute;
        left: -75%;
    }
}
.front-slidemenu-btn {
    position:relative;
    top: -20px;
    border-radius: 0;
    border:none;color:#888
}

jQuery

;(function() {
    $('.front-list-group-item').click(function() {
        var $cur = $(this);

        if ($cur.children('span').hasClass('glyphicon-chevron-down')) {
            $cur.next().slideDown();
            $cur.children('span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up')
        } else if ($cur.children('span').hasClass('glyphicon-chevron-up')) {
            $cur.next().slideUp();
            $cur.children('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down')
        }
    })

    $('#slide-menu-show').click(function() {
        if ($(this).children('span').hasClass('glyphicon-arrow-right')) {
            $('#whole-canvas').addClass('active')
            $(this).children('span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left')
        } else {
            $('#whole-canvas').removeClass('active')
            $(this).children('span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right')
        }
    })
})();

參考

http://getbootstrap.com/examples/offcanvas/