左侧栏点击收缩效果

分享 未结
9 1222
Jasmine_w
Jasmine_w 2018-4-12
悬赏:20飞吻
看到很多人都用到这个效果,我刚做完,分享一下,需要的童鞋可以看看[挤眼] ,左侧栏点击收缩效果,缩小的时候鼠标移过去才显示,效果如下:


样式:
em, i { font-style: normal; }
.nav-tree-main .layui-nav-item > a i { margin-right: 10px; }
.nav-tree-main .layui-nav-item > .layui-nav-child dd a { padding-left: 40px; }
#menuBar { cursor: pointer; color: #fff; position: absolute; left: 0; top: 0; margin: 22px; }
.layui-layout-admin .layui-logo { left: 64px; text-align: left; color: #fff; }

/* 左侧栏 *** 向左折叠 mini-sidebar */

.mini-sidebar .layui-layout-admin .layui-side { width: 48px; overflow-x: visible; }
.mini-sidebar .layui-layout-admin .layui-side:hover .layui-side-scroll { width: 268px; }
.mini-sidebar .nav-tree-main .layui-side-scroll { width: 48px; overflow-x: initial; }
.mini-sidebar .nav-tree-main.layui-nav-tree { width: 48px !important; }
.mini-sidebar .nav-tree-main.layui-nav-tree .layui-nav-item { position: relative; }
.mini-sidebar .nav-tree-main > .layui-nav-item > .layui-nav-child { position: absolute; left: 48px; top: 0; width: 200px;
background-color: rgba(57,61,73,.9)!important;display: none; z-index: 9999;border-radius: 0; }
.mini-sidebar .nav-tree-main > .layui-nav-item > .layui-nav-child dd a { line-height: 40px; text-align: left; padding: 0 20px;
color: #fff; }
.mini-sidebar .nav-tree-main > .layui-nav-item:hover > .layui-nav-child { display: block; }

.mini-sidebar .nav-tree-main > .layui-nav-item a { padding: 10px 0 0 0; line-height: 15px; text-align: center; }
.mini-sidebar .nav-tree-main > .layui-nav-item > a > .sideIcons { margin: 0 auto; }
.mini-sidebar .nav-tree-main .icon { line-height: 12px; }
.mini-sidebar .nav-tree-main > .layui-nav-item a > .cite { display: block; line-height: 12px; padding-top: 5px; font-size: 12px; }
.mini-sidebar .nav-tree-main > .layui-nav-item .cite em { display: none; }
.mini-sidebar .nav-tree-main > .layui-nav-item .layui-nav-child dd .cite{ line-height:40px; padding:0;}
.mini-sidebar .nav-tree-main > .layui-nav-item > a .layui-nav-more { display: none; }
.mini-sidebar .nav-tree-main .sub-nav .layui-nav-item a { line-height: 40px; text-align: left; padding: 0 20px; color: #b4bcc8; }
.mini-sidebar .nav-tree-main .sub-nav .layui-nav-item .layui-nav-more { display: block; }
.mini-sidebar .layui-body { left: 48px; }
.mini-sidebar .nav-tree-main .layui-nav-item > a i{ margin:0 auto;}

/*右侧*/
.layui-fluid{ padding:15px;}
.wMain-col-bg1,.wMain-col-bg2{background: #79C48C; text-align: center; padding:24px; color: #fff;}
.wMain-col-bg2{background: #63BA79;}
html:
<div class="layui-layout layui-layout-admin">
<div class="layui-header header">
<a href="javascript:;">
<!--layui-icon-spread-left-->
<i class="layui-icon layui-icon-shrink-right" id="menuBar"></i>
</a>
<div class="layui-logo">后台管理</div>
</div>
<div class="layui-side layui-bg-black leftMenuDiv">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree nav-tree-main" lay-shrink="all">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;"><i class="layui-icon"></i><span class="cite">文件<em>内容</em></span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><span class="cite">文件管理</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">三级</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">四级</a></dd>
<dd><a href="javascript:;">四级</a></dd>
</dl>
</dd>
<dd><a href="javascript:;">三级</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">四级</a></dd>
<dd><a href="javascript:;">四级</a></dd>
</dl>
</dd>
<dd><a href="javascript:;">三级</a></dd>
</dl>
</dd>
<dd><a href="javascript:;"><span class="cite">文件管理2</span></a></dd>
<dd><a href="javascript:;"><span class="cite">文件管理3</span></a></dd>
<dd><a href="javascript:;"><span class="cite">文件管理4</span></a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;"><i class="layui-icon"></i><span class="cite">图片<em>内容</em></span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><span class="cite">图片管理</span></a></dd>
<dd><a href="javascript:;"><span class="cite">图片管理2</span></a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md9 wMain-col-bg1">
你的内容 9/12
</div>
<div class="layui-col-md3 wMain-col-bg2">
你的内容 3/12
</div>
</div>
</div>

</div>
</div>
js:
layui.use(['layer', 'form', 'element'], function () {
var layer = layui.layer
, form = layui.form
, $ = layui.jquery;

$(function () {
// 左侧栏向左折叠
$("#menuBar").on('click', function () {
if ($("body").hasClass("mini-sidebar")) {
$("body").removeClass("mini-sidebar");
$(this).addClass("layui-icon-shrink-right");
$(this).removeClass("layui-icon-spread-left");
} else {
$("body").addClass("mini-sidebar");
$(this).removeClass("layui-icon-shrink-right");
$(this).addClass("layui-icon-spread-left");
}
});
})

});
[挤眼] 有更好想法的童鞋,互动分享一下自己的看法~~
回帖