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

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

iconfont自定义图标

整体框架来到关键的部分，侧边栏菜单；
侧边栏收起展开动画
说到动画我们可以通过 jQuery 、css3来实现，关于css3 与 jQuery 动画的实现方式就不详细说了，简单总结以下几点：

css3 使用 GPU，jQuery 使用 CPU

css3 比 jQuery 更流畅，更快，更效率

jQuery 支持所有游览器

css3(animation, transition) 不支持 ie6, 7, 8, 9

css3 animation 更灵活

【东拼西凑完成一个“前端框架”(3)|东拼西凑完成一个“前端框架”(3) - 侧边栏】综上，还是推荐 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; }

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

文章图片
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); }

看效果：