效果展示及實現(xiàn)步驟分析
tuozuai1.gif
在實現(xiàn)過程代碼中將左側側邊欄稱為sidebar
功能實現(xiàn)todo
點擊
sidebar下方關閉按鈕(x)，sidebar向左方滑出屏幕，關閉按鈕向右方滑動，同時旋轉(zhuǎn)為(+)點擊加號，
sidebar向右滑動，(+)向左滑動，并旋轉(zhuǎn)為(x)點擊
sidebar上的菜單欄，相應的內(nèi)容欄(從左向右滑動)效果*，如果已經(jīng)有打開的內(nèi)容欄，則已打開的內(nèi)容欄關閉，新點擊的菜單的相應內(nèi)容欄從下向上滑動
打開的內(nèi)容欄的右上方有關閉按鈕(<)，點擊后內(nèi)容欄向左滑動關閉
完整性*。如果已經(jīng)有打開的內(nèi)容欄，點擊
sidebar下放的關閉按鈕，則sidebar關閉，已經(jīng)打開的內(nèi)容欄也應該關閉。
實現(xiàn)步驟
實現(xiàn)html文檔結構
編寫js代碼，添加相應的事件相應的函數(shù)邏輯
在每個事件函數(shù)中添加動畫效果
用HTML+CSS實現(xiàn)側邊欄頁面布局
<!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>
資產(chǎn)
</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>
資產(chǎn)
</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
