效果展示及实现步骤分析
tuozuai1.gif
在实现过程代码中将左侧侧边栏称为sidebar
功能实现todo
点击
sidebar下方关闭按钮(x)，sidebar向左方滑出屏幕，关闭按钮向右方滑动，同时旋转为(+)点击加号，
sidebar向右滑动，(+)向左滑动，并旋转为(x)点击
sidebar上的菜单栏，相应的内容栏(从左向右滑动)效果*，如果已经有打开的内容栏，则已打开的内容栏关闭，新点击的菜单的相应内容栏从下向上滑动
打开的内容栏的右上方有关闭按钮(<)，点击后内容栏向左滑动关闭
完整性*。如果已经有打开的内容栏，点击
sidebar下放的关闭按钮，则sidebar关闭，已经打开的内容栏也应该关闭。
实现步骤
实现html文档结构
编写js代码，添加相应的事件相应的函数逻辑
在每个事件函数中添加动画效果
用HTML+CSS实现侧边栏页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sidebar_demo</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="sidebardemo.css">
</head>
<body>
<div id="sidebar">
<ul>
<li id="prof" class="iten">
<span class="glyphicon glyphicon-user"></span>
<div>
我
</div>
</li>
<li id="asset" class="iten">
<span class="glyphicon glyphicon-usd"></span>
<div>
资产
</div>
</li>
<li id="brand" class="iten">
<span class="glyphicon glyphicon-heart"></span>
<div>
品牌
</div>
</li>
<li id="brandcast" class="iten">
<span class="glyphicon glyphicon-bell"></span>
<div>
直播
</div>
</li>
<li id="foot" class="iten">
<span class="glyphicon glyphicon-eye-open"></span>
<div>
看过
</div>
</li>
<li id="calendar" class="iten">
<span class="glyphicon glyphicon-time"></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">
<i class="glyphicon glyphicon-chevron-left"></i>
</div>
<div>
我
</div>
</div>
<div id="asset-content" class="nav-content">
<div class="nav-con-close">
<i class="glyphicon glyphicon-chevron-left"></i>
</div>
<div>
资产
</div>
</div>
<div id="brand-content" class="nav-content">
<div class="nav-con-close">
<i class="glyphicon glyphicon-chevron-left"></i>
</div>
<div>
品牌
</div>
</div>
<div id="broadcast-content" class="nav-content">
<div class="nav-con-close">
<i class="glyphicon glyphicon-chevron-left"></i>
</div>
<div>
品牌
</div>
</div>
<div id="foot-content" class="nav-content">
<div class="nav-con-close">
<i class="glyphicon glyphicon-chevron-left"></i>
</div>
<div>
看过
</div>
</div>
<div id="calendar-content" class="nav-content">
<div class="nav-con-close">
<i class="glyphicon glyphicon-chevron-left"></i>
</div>
<div>
日历
</div>
</div>
</body>
</html>
css
ul {
list-style: none;
padding-left: 0;
}
#sidebar{
width: 35px;
background-color: #e1e1e1;
padding-top: 200px;
position: fixed;
min-height: 100%;
z-index: 100;
}
.iten{
font-size: 12px;
font-family: 'Microsoft YaHei';
text-align: center;
margin-top: 10px;
}
#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: solid; 1px black;
z-index: 99;
filter: alpha(opacity:0);
opacity: 0;
}
.nav-con-close{
position: absolute;
top: 5px;
right: 5px;
}
css
ul {
list-style: none;
padding-left: 0;
}
#sidebar{
width: 35px;
background-color: #e1e1e1;
padding-top: 200px;
position: fixed;
min-height: 100%;
z-index: 100;
}
.iten{
font-size: 12px;
font-family: 'Microsoft YaHei';
text-align: center;
margin-top: 10px;
}
#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: solid; 1px black;
z-index: 99;
filter: alpha(opacity:0);
opacity: 0;
}
.nav-con-close{
position: absolute;
top: 5px;
right: 5px;
}
.sideber-move-left {
animation: sml 1s 1 forwards;
-webkit-animation: sml 1s 1 forwards;
-moz-animation: sml 1s 1 forwards;
-ms-animation: sml 1s 1 forwards;
-o-animation: sml 1s 1 forwards;
}
@-webkit-keyframes sml {
from {
}
to {
transform: translateX(-120px);
}
}
@-moz-keyframes sml {
from {
}
to {
transform: translateX(-120px);
}
}
@-o-keyframes sml {
from {
}
to {
transform: translateX(-120px);
}
}
@keyframes sml {
from {
}
to {
transform: translateX(-120px);
}
}
.closeBar-move-right{
animation: cmr 1s 1 forwards;
-webkit-animation: cmr 1s 1 forwards;
-moz-animation: cmr 1s 1 forwards;
-ms-animation: cmr 1s 1 forwards;
-o-animation: cmr 1s 1 forwards;
}
@-webkit-keyframes cmr {
from {
}
to {
-webkit-transform: translateX(160px) rotate(405deg) scale(1.5);
}
}
@-moz-keyframes cmr {
from {
}
to {
-moz-transform: translateX(160px) rotate(405deg) scale(1.5);
}
}
@-o-keyframes cmr {
from {
}
to {
-o-transform: translateX(160px) rotate(405deg) scale(1.5);
}
}
@keyframes cmr {
from {
}
to {
transform: translateX(160px) rotate(405deg) scale(1.5);
}
}
.sideber-move-right{
animation: sml1 1s 1 forwards;
-webkit-animation: sml1 1s 1 forwards;
-moz-animation: sml1 1s 1 forwards;
-ms-animation: sml1 1s 1 forwards;
-o-animation: sml1 1s 1 forwards;
}
@-webkit-keyframes sml1 {
from {
}
to {
transform: translateX(0px);
}
}
@-moz-keyframes sml1 {
from {
}
to {
transform: translateX(0px);
}
}
@-o-keyframes sml1 {
from {
}
to {
transform: translateX(0px);
}
}
@keyframes sml1 {
from {
}
to {
transform: translateX(0px);
}
}
.closeBar-move-left{}
js
(function() {
var Menuber = function() {
this.el = document.querySelector('#sidebar ul');
this.state = 'allClosed';
this.el.addEventListener('click', function(event) {
event.stopPropagation();
}, false);
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(event) {
var menuContentEl = document.getElementById(event.currentTarget.id + '-content');
if (self.state === 'allClosed') {
console.log('打开' + menuContentEl.id);
self.state = 'hasOpened';
self.currentOpendMenuContent = menuContentEl;
} else {
console.log('关闭' + self.currentOpendMenuContent.id);
console.log('打开' + menuContentEl.id);
self.state = 'hasOpened';
self.currentOpendMenuContent = menuContentEl;
};
}, false);
}
//console.log(this.menuList);
};
var Sidebar = function(eId, closeBarId) {
this.state = 'opened';
this.el = document.getElementById(eId || 'sidebar');
this.closeBarEl = document.getElementById(closeBarId || 'closebar');
var self = this;
this.menuber = new Menuber();
this.el.addEventListener('click', function(event) {
if (event.target !== self.el) {
self.triggerSwict();
}
}, false);
};
Sidebar.prototype.close = function() {
console.log('关闭')
this.el.className="sideber-move-left";
this.closeBarEl.className="closeBar-move-right";
this.state = 'closed';
};
Sidebar.prototype.open = function() {
console.log('打开')
this.el.className="sideber-move-right";
this.closeBarEl.className="closeBar-move-left";
this.state = 'opened';
};
Sidebar.prototype.triggerSwict = function() {
if (this.state === 'opened') {
this.close();
} else {
this.open();
};
};
var sidebar = new Sidebar();
})();
s
