feat: 支持导航栏多级菜单展示

Fix #540

src/css/common/outline/header/menu.css

@@ -9,121 +9,153 @@
     position: relative;
     pointer-events: auto;
     animation: fadeInRight 1s;
+  }
+
+  @mixin screens-md {
+    & .lower {
+      display: none;
+    }
+  }
+
+  @mixin screens-xl {
+    & .lower {
+      left: 15px;
+    }
+  }
+}
+
+& .navbar {
+  position: relative;
+  float: right;
+  animation: fadeInRight 0.2s;
 
-    & nav {
+  & ul,
+  li {
+    list-style: none;
+    margin-left: 0;
+  }
+
+  & .menu-root {
+    margin: 0;
+    padding: 0;
+    display: flex;
+
+    & .menu-item {
+      display: flex;
+      justify-content: center;
+      position: relative;
+
+      &:hover {
+        & > .sub-menu {
+          display: inline-block !important;
+          transition: all 0.4s;
+        }
+      }
+    }
+
+    /* 所有子菜单 */
+    & .sub-menu {
+      display: none;
+      opacity: 1;
+      position: absolute;
+      left: calc(100% + 20px);
+      top: 50%;
+      transform: translateY(-50%);
+      background: var(--background-color);
+      z-index: 10;
+      padding: 0.625rem;
+      width: auto;
+      text-align: center;
+      border-radius: 5px;
+      box-shadow: 0 1px 40px -8px rgba(0, 0, 0, 0.5);
+      animation: menuFadeInRight 0.3s 0.1s ease both;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: -20px;
+        transform: translateY(-50%);
+        border-width: 10px;
+        border-style: solid;
+        border-color: transparent var(--background-color) transparent transparent;
+      }
+    }
+
+    /* 直接子菜单 */
+    & > .menu-item {
+      padding: 0 0.875rem;
       position: relative;
-      float: right;
-      animation: fadeInRight 0.2s;
+      transition: all 1s ease;
+
+      & > .sub-menu {
+        top: 100%;
+        left: auto;
+        transform: none;
+        animation: fadeInUp 0.3s 0.1s ease both;
+
+        &::before {
+          top: -20px;
+          left: 50%;
+          margin-left: -10px;
+          transform: none;
+          border-color: transparent transparent;
+          border-bottom-color: var(--background-color);
+        }
+      }
 
-      & ul {
-        margin: 0;
+      & li {
+        width: 100%;
         padding: 0;
-        list-style: none;
-        display: block;
-
-        & li {
-          float: left;
-          padding: 0 0.875rem;
-          position: relative;
-          transition: all 1s ease;
-
-          &:hover {
-            & ul {
-              display: inline-block !important;
-              transition: all 0.4s;
-            }
-          }
 
-          & ul {
+        & a {
+          &::after {
+            content: "";
             display: none;
-            opacity: 1;
-            position: absolute;
-            background: var(--background-color);
-            padding: 0.625rem;
-            top: 2.875rem;
-            --parent-width: 100%;
-            --current-width: min-content;
-            width: auto;
-            text-align: center;
-            z-index: 10;
-            border-radius: 5px;
-            box-shadow: 0 1px 40px -8px rgba(0, 0, 0, 0.5);
-            animation: fadeInUp 0.3s 0.1s ease both;
-
-            &::before {
-              content: "";
-              position: absolute;
-              top: -20px;
-              left: 50%;
-              margin-left: -10px;
-              border-width: 10px;
-              border-style: solid;
-              border-color: transparent transparent;
-              border-bottom-color: var(--background-color);
-            }
-
-            & li {
-              width: 100%;
-              padding: 0;
-
-              & a {
-                &::after {
-                  content: "";
-                  display: none;
-                }
-              }
-            }
           }
+        }
+      }
 
-          & a {
-            padding: 10px 0;
-            display: inline-block;
-            color: var(--color);
-            width: auto;
-            white-space: nowrap;
-
-            &:hover {
-              color: var(--theme-color);
-            }
-
-            &::after {
-              content: "";
-              display: block;
-              position: absolute;
-              bottom: -1rem;
-              height: 6px;
-              background-color: var(--theme-color);
-              width: 100%;
-              max-width: 0;
-              transition: max-width 0.25s ease-in-out;
-            }
-
-            &:hover:after {
-              max-width: 60%;
-            }
-          }
+      & a {
+        padding: 10px 0;
+        display: inline-block;
+        color: var(--color);
+        width: auto;
+        white-space: nowrap;
+        position: relative;
+
+        &:hover {
+          color: var(--theme-color);
+        }
+
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          bottom: -1rem;
+          height: 6px;
+          background-color: var(--theme-color);
+          width: 100%;
+          max-width: 0;
+          transition: max-width 0.25s ease-in-out;
+        }
+
+        &:hover:after {
+          max-width: 100%;
         }
       }
     }
   }
 
   @mixin screens-md {
-    & .lower {
-      display: none;
-
-      & nav ul li .animated-hover svg {
-        display: inline;
-      }
+    & .navbar ul li .animated-hover svg {
+      display: inline;
     }
   }
 
   @mixin screens-xl {
-    & .lower {
-      left: 15px;
-
-      & nav.hide {
-        display: none;
-      }
+    & .navbar.hide {
+      display: none;
     }
   }
 }
@@ -140,6 +172,18 @@
   }
 }
 
+@keyframes menuFadeInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(10px) translateY(-50%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0) translateY(-50%);
+  }
+}
+
 @keyframes fadeInUp {
   0% {
     opacity: 0;
@@ -150,4 +194,4 @@
     opacity: 1;
     -webkit-transform: translateY(0);
   }
-}
+}

src/module/utils.ts

@@ -12,34 +12,6 @@ export class Utils {
     }
   }
 
-  /**
-   * 自动计算子菜单位置
-   * 子菜单位置为：父菜单宽度 / 2 - 子菜单宽度 / 2
-   */
-  @documentFunction(false)
-  public autoCalculateSubmenuPosition() {
-    const lowContainerElement = document.querySelector(".lower-container") as HTMLElement;
-    if (!lowContainerElement) {
-      return;
-    }
-    const subMenuElements = lowContainerElement.querySelectorAll(".sub-menu") as NodeListOf<HTMLElement>;
-    if (!subMenuElements || subMenuElements.length === 0) {
-      return;
-    }
-    subMenuElements.forEach((subMenuElement) => {
-      const parentMenu = subMenuElement.parentElement as HTMLElement;
-      const parentMenuWidth = parentMenu.offsetWidth;
-      // 由于 subMenuElement 为隐藏元素，因此需要先显示出来，才能获取到其宽度
-      subMenuElement.style.visibility = "hidden";
-      subMenuElement.style.display = "block";
-      const subMenuWidth = subMenuElement.offsetWidth;
-      subMenuElement.style.display = "none";
-      subMenuElement.style.visibility = "visible";
-      const subMenuLeft = parentMenuWidth / 2 - subMenuWidth / 2;
-      subMenuElement.style.left = `${subMenuLeft}px`;
-    });
-  }
-
   /**
    * 注册吸底模式 APlayer (Fixed APlayer)
    */