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