东拼西凑完成一个“前端框架”(3) - 侧边栏

目录

• 东拼西凑完成一个后台 ”前端框架“ (1) - 布局
• 东拼西凑完成一个后台 ”前端框架“ (2) - 字体图标
  项目引入
  font-awesome

iconfont自定义图标

整体框架来到关键的部分，侧边栏菜单；

侧边栏

收起展开动画

说到动画我们可以通过 jQuery 、css3来实现，关于css3 与 jQuery 动画的实现方式就不详细说了，简单总结以下几点：

1. css3 使用 GPU，jQuery 使用 CPU
2. css3 比 jQuery 更流畅，更快，更效率
3. jQuery 支持所有游览器
4. css3(animation, transition) 不支持 ie6, 7, 8, 9
5. css3 animation 更灵活

综上，还是推荐 css3 实现动画效果，实现动画效果可以通过 transition 和 animation 属性，这里我试用 transition 属性来实现动画；
1. 定义transition属性

.ls-layout .ls-layout-slider {
    width: 200px;
    height: 100vh;
    border: none;
    background: #1f242a;
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    -webkit-transition: width 300ms ease;
    transition: width 300ms ease;
    opacity: 1;
    z-index: 9;
}

2. 侧边栏 收起 样式

.ls-layout .ls-layout-slider.contracted {
    width: 50px;
}

.ls-layout-slider.contracted .header span {
    height: 0px;
    overflow: hidden;
}

image

3. js 改变class属性

var page = page || {};
(function($) {
    $.extend(page, {
        slide: function(el) {
            var $el = $(".nav-left .operate-item.slider .ls-icon");
            var slider = $(".ls-layout-slider");
            if (slider.hasClass("contracted")) {
                slider.removeClass("contracted");
                $el.removeClass("ls-icon-shrink-right");
            } else {
                slider.addClass("contracted");
                $el.addClass("ls-icon-shrink-right");
            }
        }
    });
})(jQuery);

4. 看效果

image

菜单

菜单的实现比较简单，首先是一个树：
css

.slider-menu ul li a:hover {
    text-decoration: none;
}

.slider-menu li ul li a {
    padding: 6px 0px 6px 20px;
}

.slider-menu li ul li ul li a {
    padding: 6px 0px 6px 30px;
}

.slider-menu li ul li ul li ul li a {
    padding: 6px 0px 6px 40px;
}

.slider-menu ul li .node:hover {
    background: rgba(0, 0, 0, .2);
    color: #fff;
}

.selected {
    border-left: 3px solid #1d7ce3;
    background: rgba(0, 0, 0, .5);
}

.selected i,
.selected b,
.selected span {
    color: #fff;
}

.selected-hover {
    border-left: 3px solid #1d7ce3;
}

.slider-menu ul li .selected:hover {
    background: rgba(0, 0, 0, .2);
}

.slider-menu .expandable {
    position: absolute;
    right: 15px;
    line-height: 20px;
}

html

...
    

        

            
                
                系统管理
                
            
            

                

                    
                        
                        菜单管理
                    
                
                

                    
                        
                        权限管理
                    
                
                

                    
                        
                        用户管理
                    
                
                

                    
                        
                        操作管理
                    
                
                

                    
                        
                        角色管理
                    
                

            
        
        

            
                
                日志
                
            
            

                

                    
                        
                        日志管理
                    
                
            
        
    
...

收缩之后的样式：

.ls-layout-slider.contracted .node-root span {
    display: none;
}

.ls-layout-slider.contracted .node-root b {
    display: none;
}

.ls-layout-slider.contracted .slider-menu .node-root {
    padding: 6px 0;
    text-align: center;
}

.ls-layout-slider.contracted .slider-menu .node-container-root {
    position: relative;
}

.ls-layout-slider.contracted .slider-menu .node-container-son {
    display: none;
    width: 150px;
    position: absolute;
    background: #1f242a;
    padding: 10px;
    padding: 10px;
    border-radius: 4px;
    left: 51px;
    top: 0;
}

.ls-layout-slider.contracted .slider-menu .node-container-root:hover .node-container-son {
    display: block;
}

.ls-layout .ls-layout-slider.contracted input {
    width: 0;
}

.ls-layout .layui-tab-title.contracted .node-container .slider-menu li ul {
    background: rgba(0,0,0,0);
}

看效果：

image

基本完成，欢迎批评指正；

源码地址

https://github.com/LaosanShang/ls-admin-frontend