新增多级菜单，调整侧边栏样式

README.md

@@ -27,6 +27,7 @@
 - perfect-scrollbar
 
 ### 更新记录
+2019.03.21 新增多级菜单，调整侧边栏一些样式(多级菜单的滚动条位置还需要观察)
 2019.03.19 调整logo，修复滚动条bug
 
 #### 登录页面

css/style.min.css

@@ -83,7 +83,15 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .navbar-default .navbar-toggle .icon-bar {
     background-color: #4d5259;
 }
-.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
+.nav > li > a:focus {
+    background-color: transparent;
+}
+.nav > li > a:hover {
+    background-color: rgba(0,0,0,.0085);
+}
+.nav .open > a,
+.nav .open > a:focus,
+.nav .open > a:hover {
     background-color: transparent;
     border-color: transparent;
 }
@@ -2529,27 +2537,32 @@ dd, dt {
     padding-bottom: 13px;
 }
 .nav-drawer > .active > a {
-    background-color: transparent;
+    background-color: rgba(0,0,0,.0125);
     border-color: #33cabb;
 }
-.nav > li > a:hover {
-    text-decoration: none;
-    background-color: #f9fafb;
-}
-.nav > li > a:focus {
-    background-color: transparent;
+.nav-drawer > li.active > a {
+    background-color: rgba(0,0,0,.0125)!important;
 }
 .nav-drawer > .active > a:hover,
 .nav-drawer > .active > a:focus,
 .nav-drawer > .active > a:active {
+    background-color: rgba(0,0,0,.0125);
     border-color: #33cabb;
 }
+.nav-drawer .nav-subnav > li.active > a,
+.nav-drawer .nav-subnav > li > a:hover {
+    color: #33cabb;
+    background-color: transparent;
+}
 .nav-drawer > li > a > i {
     position: absolute;
     left: 21px;
     top: 11px;
     font-size: 1.25em;
 }
+.nav-drawer ul li ul {
+    padding-left: 15px;
+}
 .nav-item-has-subnav > a:after {
     position: absolute;
     right: 24px;
@@ -2569,10 +2582,6 @@ dd, dt {
 .nav-item-has-subnav.open > .nav-subnav {
     display: block;
 }
-.nav-subnav > .active > a {
-    color: #33cabb;
-    background-color: #f9fafb;
-}
 .nav-subnav {
     display: none;
     margin-top: 8px;

index.html

@@ -78,6 +78,26 @@
                 <li> <a href="lyear_js_notify.html">通知消息</a> </li>
               </ul>
             </li>
+            <li class="nav-item nav-item-has-subnav">
+              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单</a>
+              <ul class="nav nav-subnav">
+                <li> <a href="#!">一级菜单</a> </li>
+                <li class="nav-item nav-item-has-subnav"> 
+                  <a href="#!">一级菜单</a>
+                  <ul class="nav nav-subnav">
+                    <li> <a href="#!">二级菜单</a> </li>
+                    <li class="nav-item nav-item-has-subnav"> 
+                      <a href="#!">二级菜单</a>
+                      <ul class="nav nav-subnav">
+                        <li> <a href="#!">三级菜单</a> </li>
+                        <li> <a href="#!">三级菜单</a> </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li> <a href="#!">一级菜单</a> </li>
+              </ul>
+            </li>
           </ul>
         </nav>
         

js/main.min.js

@@ -27,22 +27,40 @@ jQuery( function() {
 	$( '.nav-item-has-subnav > a' ).on( 'click', function() {
 		$subnavToggle = jQuery( this );
 		$navHasSubnav = $subnavToggle.parent();
+        $topHasSubNav = $subnavToggle.parents('.nav-item-has-subnav').last();
+		$subnav       = $navHasSubnav.find('.nav-subnav').first();
+        $viSubHeight  = $navHasSubnav.siblings().find('.nav-subnav:visible').outerHeight();
+        $scrollBox    = $('.lyear-layout-sidebar-scroll');
 		$navHasSubnav.siblings().find('.nav-subnav:visible').slideUp(500).parent().removeClass('open');
-		$subnav       = $navHasSubnav.find( '.nav-subnav' );
 		$subnav.slideToggle( 300, function() {
 			$navHasSubnav.toggleClass( 'open' );
 			
 			// 新增滚动条处理
-			var scrollHeight = 0;
-			    pervTotal    = $navHasSubnav.prevAll().length,
-			    boxHeight    = $('.lyear-layout-sidebar-scroll').outerHeight(),
-		        innerHeight  = $('.sidebar-main').outerHeight();
+			var scrollHeight  = 0;
+			    pervTotal     = $topHasSubNav.prevAll().length,
+			    boxHeight     = $scrollBox.outerHeight(),
+		        innerHeight   = $('.sidebar-main').outerHeight(),
+                thisScroll    = $scrollBox.scrollTop(),
+                thisSubHeight = $(this).outerHeight(),
+                footHeight    = 121;
 			
-			if (innerHeight - boxHeight >= (pervTotal * 48)) {
+			if (footHeight + innerHeight - boxHeight >= (pervTotal * 48)) {
 			    scrollHeight = pervTotal * 48;
 			}
-			$('.lyear-layout-sidebar-scroll').animate({scrollTop: scrollHeight}, 300);
-			
+            if ($subnavToggle.parents('.nav-item-has-subnav').length == 1) {
+                $scrollBox.animate({scrollTop: scrollHeight}, 300);
+            } else {
+                // 子菜单操作
+                if (typeof($viSubHeight) != 'undefined' && $viSubHeight != null) {
+                    scrollHeight = thisScroll + thisSubHeight - $viSubHeight;
+                    $scrollBox.animate({scrollTop: scrollHeight}, 300);
+                } else {
+                    if ((thisScroll + boxHeight - $scrollBox[0].scrollHeight) == 0) {
+                        scrollHeight = thisScroll - thisSubHeight;
+                        $scrollBox.animate({scrollTop: scrollHeight}, 300);
+                    }
+                }
+            }
 		});
 	});