提交

css/common.css

@@ -64,6 +64,9 @@ a {
     right: 10px;
     font-size: 18px;
 }
+.layui-side-scroll .layui-nav .layui-nav-item{
+    border-top: 1px solid #3E4A59;
+}
 .layui-side-scroll .layui-nav .layui-nav-item a{
     cursor: pointer;
     color: #b2b2b2!important;
@@ -144,3 +147,54 @@ a {
 .layui-side-scroll .layui-nav .layui-nav-item dd a{
     padding: 0 20px 0 48px!important;
 }
+.layui-layout-admin .layui-sideact{
+    width: 70px;
+    overflow-x: initial;
+}
+.layui-layout-admin .layui-sideact .layui-side-scroll{
+    width: 100%;
+    overflow-x: initial;
+}
+.layui-layout-admin .layui-sideact .layui-nav-tree{
+    width: 100%;
+}
+.layui-layout-admin .layui-sideact .layui-side-scroll .layui-nav .layui-nav-item>a{
+    display: block;
+    text-align: center;
+    padding: 0!important;
+}
+.layui-layout-admin .layui-sideact .item-title,.layui-layout-admin .layui-sideact .layui-nav-more,.layui-layout-admin .layui-sideact .layui-nav-itemed>.layui-nav-child{
+    display: none;
+}
+.layui-side-scroll .layui-nav .layui-nav-itemact{
+    position: relative;
+}
+.layui-layout-admin .layui-sideact .layui-side-scroll .layui-icon-shrink-right{
+    position: initial;
+    right: 0;
+}
+.layui-side-scroll .layui-nav .layui-nav-itemact a .font-icon{
+    display: none;
+}
+.layui-layout-admin .layui-sideact .layui-nav-itemact .item-title{
+    margin-left: 0;
+    background-color: #475466;
+    display: block;
+}
+.layui-layout-admin .layui-sideact .layui-nav-itemact>.layui-nav-child{
+    position: absolute;
+    left: 70px;
+    top: 0;
+    z-index: 1;
+    width: 120px;
+    padding: 6px 15px;
+    display: block;
+    background-color: #242A33!important;
+}
+.layui-side-scroll .layui-nav .layui-nav-itemact .layui-nav-child dd:before,.layui-side-scroll .layui-nav-tree  .layui-nav-itemact .layui-nav-child a:before{
+    content:none;
+}
+
+.layui-side-scroll .layui-nav .layui-nav-itemact dd a{
+    padding: 0!important;
+}

index.html

@@ -7,7 +7,7 @@
   <title>后台</title>
   <link rel="stylesheet" href="./layui/css/layui.css">
   <link rel="stylesheet" href="./css/common.css">
-  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1728397_8fowqdidn1c.css">
+  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1728397_lwh6zpgh4kg.css">
   <!--[if lt IE 9]>
     <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
     <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
@@ -40,19 +40,18 @@
       </ul>
     </div>
 
-    <div class="layui-side layui-side-menu">
+    <div class="layui-side layui-side-menu layui-sideact">
       <div class="layui-side-scroll">
-
         <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
-          <li class="layui-nav-item">
+          <li class="layui-nav-item layui-nav-itemspec">
             <a href="javascript:;">
-              <cite>收起左侧导航</cite>
+              <span class="item-title">收起左侧导航</span>
               <i class="layui-icon layui-icon-shrink-right"></i>
             </a>
           </li>
           <li class="layui-nav-item layui-nav-itemed">
             <a href="javascript:;" lay-tips="文章管理" lay-direction="2">
-              <span class="font-icon"><i class="iconfont icon-tianchongxing-"></i></span>
+              <span class="font-icon"><i class="iconfont icon-wenzhang"></i></span>
               <span class="item-title">文章管理</span>
               <span class="layui-nav-more"></span>
             </a>
@@ -70,7 +69,7 @@
           </li>
           <li class="layui-nav-item layui-nav-itemed">
             <a href="javascript:;" lay-tips="权限管理" lay-direction="2">
-              <span class="font-icon"><i class="iconfont icon-quanxianfenji"></i></span>
+              <span class="font-icon"><i class="iconfont icon-quanxian"></i></span>
               <span class="item-title">权限管理</span>
               <span class="layui-nav-more"></span>
             </a>
@@ -88,7 +87,7 @@
           </li>
           <li class="layui-nav-item layui-nav-itemed">
             <a href="javascript:;" lay-tips="审核管理" lay-direction="2">
-              <span class="font-icon"><i class="iconfont icon-zhongduan"></i></span>
+              <span class="font-icon"><i class="iconfont icon-shenhe1"></i></span>
               <span class="item-title">审核管理</span>
               <span class="layui-nav-more"></span>
             </a>
@@ -106,7 +105,7 @@
           </li>
           <li class="layui-nav-item layui-nav-itemed">
             <a href="javascript:;" lay-tips="工单管理" lay-direction="2">
-              <span class="font-icon"><i class="iconfont icon-qunfenggongdanguanli"></i></span>
+              <span class="font-icon"><i class="iconfont icon-gongdan"></i></span>
               <span class="item-title">工单管理</span>
               <span class="layui-nav-more"></span>
             </a>
@@ -122,9 +121,27 @@
               </dd>
             </dl>
           </li>
+          <li class="layui-nav-item layui-nav-itemed">
+            <a href="javascript:;" lay-tips="用户管理" lay-direction="2">
+              <span class="font-icon"><i class="iconfont icon-yonghu-tianchong"></i></span>
+              <span class="item-title">用户管理</span>
+              <span class="layui-nav-more"></span>
+            </a>
+            <dl class="layui-nav-child">
+              <dd>
+                <a href="javascript:;">列表一</a>
+              </dd>
+              <dd>
+                <a href="javascript:;">列表二</a>
+              </dd>
+              <dd>
+                <a href="javascript:;">列表三</a>
+              </dd>
+            </dl>
+          </li>
           <li class="layui-nav-item layui-nav-itemed">
             <a href="javascript:;" lay-tips="商城管理" lay-direction="2">
-              <span class="font-icon"><i class="iconfont icon-shangcheng"></i></span>
+              <span class="font-icon"><i class="iconfont icon-icon-test"></i></span>
               <span class="item-title">商城管理</span>
               <span class="layui-nav-more"></span>
             </a>
@@ -142,7 +159,7 @@
           </li>
           <li class="layui-nav-item layui-nav-itemed">
             <a href="javascript:;" lay-tips="操作员管理" lay-direction="2">
-              <span class="font-icon"><i class="iconfont icon-GIS-TL_liuliangji"></i></span>
+              <span class="font-icon"><i class="iconfont icon-caozuo"></i></span>
               <span class="item-title">操作员管理</span>
               <span class="layui-nav-more"></span>
             </a>
@@ -160,7 +177,7 @@
           </li>
           <li class="layui-nav-item layui-nav-itemed">
             <a href="javascript:;" lay-tips="日志管理" lay-direction="2">
-              <span class="font-icon"><i class="iconfont icon-ziyuanxhdpi"></i></span>
+              <span class="font-icon"><i class="iconfont icon-daily-fill"></i></span>
               <span class="item-title">日志管理</span>
               <span class="layui-nav-more"></span>
             </a>
@@ -205,6 +222,7 @@
     </div>
   </div>
   <script src="./layui/layui.js"></script>
+  <script src="./js/jquery.js"></script>
   <script>
     //JavaScript代码区域
     layui.use(['element'], function () {
@@ -212,6 +230,23 @@
 
 
     });
+    $(".layui-sideact .layui-nav-item").not('.layui-nav-itemspec').mouseenter(function() {
+      if($(".layui-side-menu").hasClass('layui-sideact')) {
+        $(this).addClass('layui-nav-itemact')
+      }
+    })
+    $(".layui-sideact .layui-nav-item").not('.layui-nav-itemspec').mouseleave(function() {
+      if($(".layui-side-menu").hasClass('layui-sideact')) {
+        $(".layui-sideact .layui-nav-item").not('.layui-nav-itemspec').removeClass('layui-nav-itemact')
+      }
+    })
+    $(".layui-nav-itemspec").find('.layui-icon').on("click",function() {
+      if($(".layui-side-menu").hasClass('layui-sideact')) {
+        $(".layui-side-menu").removeClass('layui-sideact')
+      }else{
+        $(".layui-side-menu").addClass('layui-sideact')
+      }
+    })
   </script>
 </body>