Responsive Left Slide Menu

CSS3 | Bootstrap | jQuery

效果图

桌面视口

移动终端视口

HTML

    

        

            

      首页
                群组
      我的
      

        我的收藏
        我的分享
        我的草稿
        我的消息
      
                消息
                联系人
            
        
        

        长夜将至，我从今开始守望，至死方休。我将不娶妻，不封地，不生子。我将不戴宝冠，不争荣宠。我将尽忠职守，生死于斯。我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。我将生命与荣耀献给守夜人，今夜如此，夜夜皆然。 
        
    

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/