侧边栏信息展示效果

效果展示及实现步骤分析

tuozuai1.gif

在实现过程代码中将左侧侧边栏称为sidebar

功能实现todo

1. 点击sidebar下方关闭按钮(x)，sidebar向左方滑出屏幕，关闭按钮向右方滑动，同时旋转为(+)

2. 点击加号，sidebar向右滑动，(+)向左滑动，并旋转为(x)

3. 点击sidebar上的菜单栏，相应的内容栏(从左向右滑动)

4. 效果*，如果已经有打开的内容栏，则已打开的内容栏关闭，新点击的菜单的相应内容栏从下向上滑动

5. 打开的内容栏的右上方有关闭按钮(<)，点击后内容栏向左滑动关闭

6. 完整性*。如果已经有打开的内容栏，点击sidebar下放的关闭按钮，则sidebar关闭，已经打开的内容栏也应该关闭。

实现步骤

1. 实现html文档结构

2. 编写js代码，添加相应的事件相应的函数逻辑

3. 在每个事件函数中添加动画效果

用HTML+CSS实现侧边栏页面布局

    
    
    
    
    


    

        

            

                
                

                    我
                
            
            

                
                

                    资产
                
            
            

                
                

                    品牌
                
            
            

                
                

                    直播
                
            
            

                
                

                    看过
                
            
            

                
                

                    日历
                
            
        
        

            
        
    
    

        

            
        
        

            我
        
    
    

        

            
        
        

            资产
        
    
    

        

            
        
        

            品牌
        
    
    

        

            
        
        

            品牌
        
    
    

        

            
        
        

            看过
        
    
    

        

            
        
        

            日历
        
    

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