側(cè)邊欄信息展示效果

效果展示及實(shí)現(xiàn)步驟分析

tuozuai1.gif

在實(shí)現(xiàn)過程代碼中將左側(cè)側(cè)邊欄稱為sidebar

功能實(shí)現(xiàn)todo

  1. 點(diǎn)擊sidebar下方關(guān)閉按鈕(x)，sidebar向左方滑出屏幕，關(guān)閉按鈕向右方滑動，同時旋轉(zhuǎn)為(+)

  2. 點(diǎn)擊加號，sidebar向右滑動，(+)向左滑動，并旋轉(zhuǎn)為(x)

  3. 點(diǎn)擊sidebar上的菜單欄，相應(yīng)的內(nèi)容欄(從左向右滑動)

  4. 效果*，如果已經(jīng)有打開的內(nèi)容欄，則已打開的內(nèi)容欄關(guān)閉，新點(diǎn)擊的菜單的相應(yīng)內(nèi)容欄從下向上滑動

  5. 打開的內(nèi)容欄的右上方有關(guān)閉按鈕(<)，點(diǎn)擊后內(nèi)容欄向左滑動關(guān)閉

  6. 完整性*。如果已經(jīng)有打開的內(nèi)容欄，點(diǎn)擊sidebar下放的關(guān)閉按鈕，則sidebar關(guān)閉，已經(jīng)打開的內(nèi)容欄也應(yīng)該關(guān)閉。

實(shí)現(xiàn)步驟

  1. 實(shí)現(xiàn)html文檔結(jié)構(gòu)

  2. 編寫js代碼，添加相應(yīng)的事件相應(yīng)的函數(shù)邏輯

  3. 在每個事件函數(shù)中添加動畫效果

用HTML+CSS實(shí)現(xiàn)側(cè)邊欄頁面布局

<!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('關(guān)閉' + 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('關(guān)閉')
        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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容