东拼西凑完成一个“前端框架”(3)|东拼西凑完成一个“前端框架”(3) - 侧边栏
目录
- 东拼西凑完成一个后台 ”前端框架“ (1) - 布局
- 东拼西凑完成一个后台 ”前端框架“ (2) - 字体图标
项目引入
font-awesome
iconfont
自定义图标
整体框架来到关键的部分,侧边栏菜单;
侧边栏 收起展开动画
说到动画我们可以通过
jQuery
、css3
来实现,关于css3
与 jQuery
动画的实现方式就不详细说了,简单总结以下几点:【东拼西凑完成一个“前端框架”(3)|东拼西凑完成一个“前端框架”(3) - 侧边栏】综上,还是推荐
- css3 使用 GPU,jQuery 使用 CPU
- css3 比 jQuery 更流畅,更快,更效率
- jQuery 支持所有游览器
- css3(animation, transition) 不支持 ie6, 7, 8, 9
- 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;
}
![东拼西凑完成一个“前端框架”(3)|东拼西凑完成一个“前端框架”(3) - 侧边栏](https://img.it610.com/image/info10/b0323d9d82aa4db683e16f8649db0551.jpg)
文章图片
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. 看效果
![东拼西凑完成一个“前端框架”(3)|东拼西凑完成一个“前端框架”(3) - 侧边栏](https://img.it610.com/image/info10/556988a2e6cb4cabac4a19380dc3300a.gif)
文章图片
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);
}
看效果:
![东拼西凑完成一个“前端框架”(3)|东拼西凑完成一个“前端框架”(3) - 侧边栏](https://img.it610.com/image/info10/c11174a34ef94bce90dccc11a7b8f562.gif)
文章图片
image
基本完成,欢迎批评指正;
源码地址 https://github.com/LaosanShang/ls-admin-frontend
推荐阅读
- 一个人的旅行,三亚
- 一个小故事,我的思考。
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 异地恋中,逐渐适应一个人到底意味着什么()
- 迷失的世界(二十七)
- live|live to inspire 一个普通上班族的流水账0723
- 遗憾是生活的常态,但孝顺这件事,我希望每一个人都不留遗憾
- NO.38|NO.38 我不是嫁不出去,而是不想嫁