侧栏组件
来源：互联网 发布：神机妙算软件购买 编辑：程序博客网 时间：2024/05/22 23:00
<div id="sidebar">
<ul>
<li id="prof" class="item">
<span class="glyphicon glyphicon-user"></span>
<div>我</div>
</li>
<li id="asset" class="item">
<span class="glyphicon glyphicon-usd"></span>
<div>资产</div>
</li>
<li id="brand" class="item">
<span class="glyphicon glyphicon-heart"></span>
<div>品牌</div>
</li>
<li id="broadcast" class="item">
<span class="glyphicon glyphicon-bell"></span>
<div>直播</div>
</li>
<li id="foot" class="item">
<span class="glyphicon glyphicon-eye-open"></span>
<div>看过</div>
</li>
<li id="calendar" class="item">
<span class="glyphicon glyphicon-dashboard"></span>
<div>日历</div>
</li>
</ul>
<div id="closeBar">
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
<div class="nav-content" id="prof-content">
<div class="nav-con-close">
<span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div>我</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/sidebar.js"></script>
</body>
css样式
body{
margin:0px;
padding:0px;
}
ul{
list-style:none;
padding-left:0;
}
#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;
z-index:99;
opacity:0;
}
.nav-con-close{
position:absolute;
top:5px;
right:5px;
}
.sidebar-move-left{
-webkit-animation-name:sml;
-moz-animation-name:sml;
-o-animation-name:sml;
animation-name:sml;
-webkit-animation-direction:1s;
-moz-animation-direction:1s;
-o-animation-direction:1s;
animation-direction: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;
}
@-webkit-keyframes sml{
from{
}
to{
-webkit-transform:translateX(-120px);
transform:translateX(-120px);
}
}
@keyframes sml{
from{
}
to{
-webkit-transform:translateX(-120px);
transform:translateX(-120px);
}
}
.closeBar-move-right{
-webkit-animation-name:cmr;
-moz-animation-name:cmr;
-o-animation-name:cmr;
animation-name:cmr;
-webkit-animation-direction:1s;
-moz-animation-direction:1s;
-o-animation-direction:1s;
animation-direction: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;
}
@-webkit-keyframes cmr{
from{
}
to{
-webkit-transform:translateX(160px),rotate(405deg),scale(1.5);
transform:translateX(160px),rotate(405deg),scale(1.5);
}
}
@keyframes cmr{
from{
}
to{
-webkit-transform:translateX(160px),rotate(405deg),scale(1.5);
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-direction:1s;
-moz-animation-direction:1s;
-o-animation-direction:1s;
animation-direction: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;
}
@-webkit-keyframes smr{
from{
}
to{
-webkit-transform:translateX(120px);
transform:translateX(120px);
}
}
@keyframes smr{
from{
}
to{
-webkit-transform:translateX(120px);
transform:translateX(120px);
}
}
.closeBar-move-left{
-webkit-animation-name:cml;
-moz-animation-name:cml;
-o-animation-name:cml;
animation-name:cml;
-webkit-animation-direction:1s;
-moz-animation-direction:1s;
-o-animation-direction:1s;
animation-direction: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;
}
@-webkit-keyframes cml{
from{
-webkit-transform:scale(1.5);
transform:scale(1.5);
}
to{
-webkit-transform:translateX(-160px),scale(1)rotate(405deg);
transform:translateX(-160px),scale(1)rotate(405deg);
}
}
@keyframes cml{
from{
-webkit-transform:scale(1.5);
transform:scale(1.5);
}
to{
-webkit-transform:translateX(-160px),scale(1)rotate(405deg);
transform:translateX(-160px),scale(1)rotate(405deg);
}
}
js部分
(function(){
var Menubar = function() {
this.el = document.querySelector('#sidebar ul');
this.state ='allClosed';//hasOpened
this.el.addEventListener('click', function (e) {
e.stopPropagation();
});
var self = this;
this.currentOpendMenuContent = null;
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'){
console.log('打开'+ menuContentEl.id);
self.state ='hasOpened';
self.currentOpendMenuContent =menuContentEl;
}else{
console.log('关闭'+currentOpendMenuContent.id);
console.log('打开'+menuContentEl.id);
self.state ='hasOpened';
self.currentOpendMenuContent =menuContentEl;
}
});
}
};
var Sidebar =function(eId,closeBrarId){
this.state = 'opened';
this.el = document.getElementById(eId||'sidebar');
this.closeBarEl = document.getElementById(closeBrarId||'closeBar');
var self = this;
this.menubar = new Menubar();
this.el.addEventListener('click',function(event){
if(event.target !==self.el){
self.triggerSwitch();
}
});
};
Sidebar.prototype.close = function(){
console.log('关闭sidebar');
this.el.className = 'sidebar-move-left';
this.closeBarEl.className = 'closeBar-move-right';
this.state = 'closed';
};
Sidebar.prototype.open = function(){
console.log('打开sidebar');
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();
})();
