側邊欄測試
根據教程的內容做改變：
兩個構造函數合一，添加點擊文檔關閉菜單內容，點擊關閉側邊欄按鈕也會關閉菜單內容。
ie9及更早版本對于事件對象currentTarget屬性不支持，現在未做處理。
(function?()?{
function?Sidebar(sidebar,closeBar,sidebarUl,sidebarMenuList,menuCloseList)?{
if?(this?instanceof?Sidebar)?{
this.sidebar?=?sidebar;
this.closeBar?=?closeBar;
this.sidebarUl?=?sidebarUl;
this.sidebarMenuList?=?sidebarMenuList;
this.menuCloseList?=?menuCloseList;
this.sidebarState?=?"opened";
this.menuState?=?"allClosed";
this.currentOpenedMenuContent?=?null;
this.init();
}?else?{
return?Sidebar(sidebar,closeBar,sidebarUl,sidebarsidebarMenuList,menuCloseList);
}
}
Sidebar.prototype.init?=?function?()?{
var?_this?=?this;
addHandle(this.closeBar,"click",function?(ev)?{
ev?=?ev?||?event;
_this.triggerSwich();
})
addHandle(this.sidebarUl,"click",function?(ev)?{
ev?=?ev?||?event;
stopPropagation(ev);
});
for?(var?i?=?0;?i?<?this.sidebarMenuList.length;?i++)?{
addHandle(this.sidebarMenuList[i],"click",function?(ev)?{
ev?=?ev?||?event;
_this.menuEvent(ev);
})
}
for?(var?i?=?0;?i?<?this.menuCloseList.length;?i++)?{
addHandle(this.menuCloseList[i],"click",function?(ev)?{
ev?=?ev?||?event;
_this.menuClose(ev);
})
}
addHandle(this.closeBar,"click",function?()?{
_this.closeMenu();
})
addHandle(document,"click",function?()?{
_this.closeMenu();
})
}
Sidebar.prototype.triggerSwich?=?function?()?{
if?(this.sidebarState?===?"opened")?{
this.close();
}?else?{
this.open();
}
}
Sidebar.prototype.close?=?function?()?{
console.log("close?sidebar");
this.sidebarState?=?"closed";
this.sidebar.className?=?"sideBar-move-left";
this.closeBar.className?=?"closeBar-move-right";
}
Sidebar.prototype.open?=?function?()?{
console.log("open?sidebar");
this.sidebarState?=?"opened";
this.sidebar.style.left?=?"-120px";
this.closeBar.style.left?=?"160px";
this.sidebar.className?=?"sideBar-move-right";
this.closeBar.className?=?"closeBar-move-left";
}
Sidebar.prototype.menuEvent?=?function?(ev)?{
var?menuContent?=?document.getElementById(ev.currentTarget.id?+?"-content");
if?(this.menuState?===?"allClosed")?{
console.log("open?"?+?menuContent.id);
menuContent.style.top?=?0;
menuContent.style.left?=?"-85px";
menuContent.className?=?"nav-content";
menuContent.className?+=?"?menuContent-move-right";
this.menuState?=?"hasOpened";
this.currentOpenedMenuContent?=?menuContent;
}?else?{
console.log("close?"?+?this.currentOpenedMenuContent.id);
console.log("open?"?+?menuContent.id);
this.currentOpenedMenuContent.style.top?=?0;
this.currentOpenedMenuContent.style.top?=?"35px";
this.currentOpenedMenuContent.className?=?"nav-content";
this.currentOpenedMenuContent.className?+=?"?menuContent-move-left";
menuContent.style.top?=?"250px";
menuContent.style.left?=?"35px";
menuContent.className?=?"nav-content";
menuContent.className?+=?"?menuContent-move-up";
this.menuState?=?"hasOpened";
this.currentOpenedMenuContent?=?menuContent;
}
}
Sidebar.prototype.menuClose?=?function?(ev)?{
var?menuContent?=?ev.target.parentNode.parentNode?||?ev.srcElement.parentNode.parentNode;
menuContent.style.top?=?0;
menuContent.style.left?=?"35px";
menuContent.className?=?"nav-content";
menuContent.className?+=?"?menuContent-move-left";
this.menuState?=?"allClosed";
}
Sidebar.prototype.closeMenu?=?function?(ev)?{
var?menuContents?=?getByClass(document,"nav-content");
for?(var?i?=?0;?i?<?menuContents.length;?i++)?{
menuContents[i].className?=?"";
menuContents[i].className?=?"nav-content";
menuContents[i].className?+=?"?menuContent-move-left";
}
this.menuState?=?"allClosed";
}
function?addHandle(ele,type,handle)?{
if?(ele.addEventListener)?{
ele.addEventListener(type,handle,false);
}?else?if?(ele.attachEvent)?{
ele.attachEvent("on"+type,function?()?{
handle.call(ele);
})
}?else?{
ele[type]?=?handle;
}
}
function?stopPropagation(
ev)?{
if?(ev.stopPropagation)?{
ev.stopPropagation();
}?else?{
ev.cancelBubble?=?true;
}
}
function?getByClass(parent,clsName)?{
var?ele?=?parent.getElementsByTagName("*");
var?result?=?[];
var?re?=?new?RegExp("\\b"+clsName+"\\b","g");
for?(var?i?=?0;?i?<?ele.length;?i++)?{
if?(re.test(ele[i].className))?{
result.push(ele[i]);
}
}
return?result;
}
var?sidebar?=?new?Sidebar(document.getElementById("sidebar"),?document.getElementById("closeBar"),?document.getElementById("sidebar").getElementsByTagName("ul")[0],?document.getElementById("sidebar").getElementsByTagName("ul")[0].getElementsByTagName("li"),?getByClass(document,"nav-con-close"));
})();
2016-11-17
CSS部分
body,div,ul,li,span,i{margin:?0;?padding:?0;} ????????ul{list-style:?none;} ????????body?{ ????????????font-family:?'Microsoft?YaHei','Open?Sans',?'trebuchet?ms',?arial,?sans-serif; ????????????font-size:?12px; ????????} ????????#sidebar?{ ????????????position:?fixed; ????????????left:?0; ????????????top:?0; ????????????z-index:?100; ????????????min-height:?100%; ????????????width:?35px; ????????????padding-top:?200px; ????????????background-color:?#e1e1e1; ????????} ????????.item{ ????????????margin-top:?5px; ????????????text-align:?center; ????????} ????????#closeBar{ ????????????position:?absolute; ????????????left:?0; ????????????bottom:?30px; ????????????width:?35px; ????????????text-align:?center; ????????????cursor:?pointer; ????????} ????????.nav-content?{ ????????????position:?absolute; ????????????z-index:?99; ????????????min-height:?100%; ????????????width:?170px; ????????????opacity:?0; ????????????filter:?alpha(opacity=0); ????????????text-align:?center; ????????????background-color:?#e1e1e1; ????????} ????????.nav-con-close?{ ????????????position:?absolute; ????????????top:?5px; ????????????right:?5px; ????????????cursor:?pointer; ????????} ????????.sideBar-move-left{animation:?sml?1s?1?forwards;} ????????@keyframes?sml{ ????????????from{} ????????????to{ ????????????????transform:?translateX(-120px); ????????????} ????????} ????????.closeBar-move-right{animation:?cmr?1s?1?forwards;} ????????@keyframes?cmr{ ????????????from{} ????????????to{ ????????????????transform:?translateX(160px)?rotate(405deg)?scale(1.5); ????????????} ????????} ????????.sideBar-move-right{animation:?smr?1s?1?forwards;} ????????@keyframes?smr{ ????????????from{} ????????????to{ ????????????????transform:?translateX(120px); ????????????} ????????} ????????.closeBar-move-left{animation:?cml?1s?1?forwards;} ????????@keyframes?cml{ ????????????from{ ????????????????transform:?scale(1.5); ????????????} ????????????to{ ????????????????transform:?translateX(-160px)?rotate(-405deg)?scale(1); ????????????} ????????} ????????.menuContent-move-right{animation:?mmr?1s?1?forwards;} ????????@keyframes?mmr{ ????????????from{ ????????????????opacity:?0; ????????????????filter:?alpha(opacity=0); ????????????} ????????????to{ ????????????????opacity:?1; ????????????????filter:?alpha(opacity=100); ????????????????transform:?translateX(120px); ????????????} ????????} ????????.menuContent-move-left{animation:?mml?1s?1?forwards;} ????????@keyframes?mml{ ????????????from{ ????????????????opacity:?1; ????????????????filter:?alpha(opacity=100); ????????????} ????????????to{ ????????????????opacity:?0; ????????????????filter:?alpha(opacity=0); ????????????????transform:?translateX(-120px); ????????????} ????????} ????????.menuContent-move-up{animation:?mmu?1s?1?forwards;} ????????@keyframes?mmu{ ????????????from{ ????????????????opacity:?0; ????????????????filter:?alpha(opacity=0); ????????????} ????????????to{ ????????????????opacity:?1; ????????????????filter:?alpha(opacity=100); ????????????????transform:?translateY(-250px); ????????????} ????????}2016-11-17
HTML部分