                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /侧边栏信息展示效果

侧边栏测试

根据教程的内容做改变：

两个构造函数合一，添加点击文档关闭菜单内容，点击关闭侧边栏按钮也会关闭菜单内容。

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"));
})();

学之舟_36820

2016-11-17

源自：侧边栏信息展示效果 5-1

关注问题我要回答

1698

操作

收起

2 回答

学之舟_36820 提问者
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);
            }
        }

1 回复有任何疑惑可以回复我~

收起回答

学之舟_36820 提问者
2016-11-17

HTML部分

<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-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>