标签：侧边栏
效果:
代码:
html结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="sidebar.css">
</head>
<body>
<div id="sidebar">
<ul >
<li id="prof" class="item">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div>我</div>
</li>
<li id="asset" class="item">
<span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
<div>资产</div>
</li>
<li id="brand" class="item">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<div>品牌</div>
</li>
<li id="broadcast" class="item">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
<div>直播</div>
</li>
<li id="foot" class="item">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
<div>看过</div>
</li>
<li id="calendar" class="item">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<div>日历</div>
</li>
</ul>
<div id="closebar">
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
<div id="prof-content" class="nav-content">
<div class="nav-con-close">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div>我</div>
</div>
<div id="asset-content" class="nav-content">
<div class="nav-con-close">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div>资产</div>
</div>
<div id="brand-content" class="nav-content">
<div class="nav-con-close">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div>品牌</div>
</div>
<div id="broadcast-content" class="nav-content">
<div class="nav-con-close">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div>直播</div>
</div>
<div id="foot-content" class="nav-content">
<div class="nav-con-close">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div>看过</div>
</div>
<div id="calendar-content" class="nav-content">
<div class="nav-con-close">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div>日历</div>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
</body>
</html>
css样式
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
#sidebar{width: 35px;background-color: #e1e1e1;padding-top: 200px;position: fixed;min-height: 100%;z-index: 100}
.item{font-size: 12px;font-family: ‘Microsoft YaHei‘;text-align: center;margin-top: 5px;}
#closebar{position: absolute;bottom: 30px;width: 35px;text-align: center;cursor: pointer;}
.nav-content{width: 200px;position: fixed;min-height: 100%;background-color: #e1e1e1;border: 1px solid black;opacity: 0}
.nav-con-close{position: absolute;top: 5px;right: 5px;z-index: 99;cursor: pointer;}
.sidebar-move-left{
/*left: -120px;*/
-webkit-animation-name:sml;
-moz-animation-name:sml;
-o-animation-name:sml;
animation-name:sml;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@keyframes sml{
from{
}
to{
transform:translateX(-120px);
}
}
.closeBar-move-right{
-webkit-animation-name:cmr;
-moz-animation-name:cmr;
-o-animation-name:cmr;
animation-name:cmr;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@keyframes cmr{
from{
}
to{
transform:translateX(160px) rotate(405deg) scale(1.5);
}
}
.sidebar-move-right{
-webkit-animation-name:smr;
-moz-animation-name:smr;
-o-animation-name:smr;
animation-name:smr;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@keyframes smr{
from{
}
to{
transform:translateX(120px);
}
}
.closebar-move-left{
-webkit-animation-name:cml;
-moz-animation-name:cml;
-o-animation-name:cml;
animation-name:cml;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@keyframes cml{
from{
transform:scale(1.5);
}
to{
transform:translateX(-160px) rotate(-405deg) scale(1);
}
}
.menucontent-move-right{
-webkit-animation-name:mmr;
-moz-animation-name:mmr;
-o-animation-name:mmr;
animation-name:mmr;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
-o-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@keyframes mmr{
from{
opacity: 0;
}
to{
opacity: 1;
transform:translateX(120px);
}
}
.menucontent-move-left{
-webkit-animation-name:mml;
-moz-animation-name:mml;
-o-animation-name:mml;
animation-name:mml;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
-o-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@keyframes mml{
from{
opacity: 1;
}
to{
opacity: 0;
transform:translateX(-120px);
}
}
.menucontent-move-up{
-webkit-animation-name:mmu;
-moz-animation-name:mmu;
-o-animation-name:mmu;
animation-name:mmu;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@keyframes mmu{
from{
opacity: 0;
}
to{
opacity: 1;
transform:translateY(-250px);
}
}
js特效
(function () {
var Menubar = function (){
var self = this;
this.currentOpendMenuContent = null;
this.menuContentList = null;
this.el = document.querySelector(‘#sidebar ul‘);
this.state = ‘allClosed‘;
this.el.addEventListener(‘click‘,function(e){
e.stopPropagation();
});
this.menuList = document.querySelectorAll(‘#sidebar ul > li‘);
for (var i = 0; i <this.menuList.length; i++) {
this.menuList[i].addEventListener(‘click‘,function(e){
var menuContentEl = document.getElementById(e.currentTarget.id+‘-content‘);
if (self.state === ‘allClosed‘) {
menuContentEl.style.top = ‘0‘;
menuContentEl.style.left = ‘-85px‘;
menuContentEl.className = ‘nav-content‘;
menuContentEl.classList.add(‘menucontent-move-right‘);
self.state = ‘hasOpened‘;
self.currentOpendMenuContent = menuContentEl;
}else{
self.currentOpendMenuContent.style.top = ‘0px‘;
self.currentOpendMenuContent.style.left = ‘35px‘;
self.currentOpendMenuContent.className = ‘nav-content‘;
self.currentOpendMenuContent.classList.add(‘menucontent-move-left‘);
menuContentEl.style.top = ‘250px‘;
menuContentEl.style.left = ‘35px‘;
menuContentEl.className = ‘nav-content‘;
menuContentEl.classList.add(‘menucontent-move-up‘);
self.state = ‘hasOpened‘;
self.currentOpendMenuContent = menuContentEl;
}
});
};
this.menuContentList = document.querySelectorAll(‘.nav-content > div.nav-con-close‘);
for (i = 0; i < this.menuContentList.length; i++) {
this.menuContentList[i].addEventListener(‘click‘,function(e){
var menuContent = e.currentTarget.parentNode;
menuContent.className = ‘nav-content‘;
menuContent.style.top = ‘0‘;
menuContent.style.length = ‘35px‘;
menuContent.classList.add(‘menucontent-move-left‘);
self.state = ‘allClosed‘;
});
};
}
var Sidebar = function (eId,closeBarId){
var self = this;
this.state = ‘opened‘;
this.menubar = new Menubar();
this.el = document.getElementById(eId||‘sidebar‘);
this.closeBarEl = document.getElementById(closeBarId||‘closebar‘);
this.el.addEventListener(‘click‘,function(event){
if (event.target !== this.el) {
self.triggerSwitch();
};
});
};
Sidebar.prototype.close = function () {
console.log(‘关闭‘);
this.el.className = ‘sidebar-move-left‘;
this.closeBarEl.className = ‘closeBar-move-right‘;
this.state = ‘closed‘;
};
Sidebar.prototype.open = function () {
this.el.style.left = ‘-120px‘;
this.el.className = ‘sidebar-move-right‘;
this.closeBarEl.style.left = ‘160px‘;
this.closeBarEl.className = ‘closebar-move-left‘;
this.state = ‘opened‘;
};
Sidebar.prototype.triggerSwitch = function(){
if (this.state === ‘opened‘) {
this.close();
}else{
this.open();
}
};
var sidebar = new Sidebar();
})();
本文出自 “素颜” 博客，请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1829023
标签：侧边栏
原文地址：http://suyanzhu.blog.51cto.com/8050189/1829023
