style 漢堡子選單對齊參考稿

assets/css/style.css

@@ -561,6 +561,7 @@ nav a {
         padding-top: 0;
         padding-bottom: 1.5rem;
         overflow-y: auto;
+        overflow-anchor: none;
         -webkit-overflow-scrolling: touch;
         justify-content: flex-start;
         justify-self: stretch;
@@ -569,17 +570,32 @@ nav a {
     }
 
     .portal-nav.portal-nav--open>ul>li {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
         width: 100%;
-        max-width: 22rem;
+        max-width: min(92vw, 26rem);
         align-self: center;
         position: relative;
         padding-bottom: 0;
     }
 
     .portal-nav.portal-nav--open>ul>li>a {
-        min-height: 40px;
+        order: 1;
-        padding: 6px 12px;
+        min-height: 44px;
+        padding: 10px 16px;
         width: 100%;
+        flex-shrink: 0;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        box-sizing: border-box;
+        background: transparent;
+    }
+
+    .portal-nav.portal-nav--open>ul>li.open>a {
+        border-color: transparent;
+        border-radius: 0;
+        color: var(--primary);
     }
 
     .portal-nav>ul>li {
@@ -588,12 +604,6 @@ nav a {
         position: relative;
     }
 
-    .portal-nav>ul>li.open {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
     .portal-nav>ul>li>a,
     .portal-nav .portal-submenu a,
     .portal-nav .portal-submenu .portal-nav__subgroup-head,
@@ -617,63 +627,92 @@ nav a {
         width: 100%;
     }
 
-    .portal-nav>ul>li:hover>.portal-submenu,
+    /* 漢堡：子選單永遠排在主項連結下面，用高度往下滑開（不 display 切換、不 absolute） */
-    .portal-nav>ul>li:focus-within>.portal-submenu {
+    .portal-nav.portal-nav--open .portal-submenu,
-        display: none;
+    .portal-nav.portal-nav--open .portal-submenu-nested {
+        position: static !important;
+        top: auto !important;
+        left: auto !important;
+        right: auto !important;
+        min-width: 0 !important;
+        box-shadow: none !important;
     }
 
-    .portal-nav>ul>li.open>.portal-submenu {
+    .portal-nav.portal-nav--open>ul>li>.portal-submenu {
-        display: flex;
+        display: flex !important;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
-        gap: 2px;
+        align-self: stretch;
-        order: 1;
+        order: 2;
-    }
-
-    .portal-nav>ul>li.open>a {
-        order: 0;
-    }
-
-    .portal-nav .portal-submenu {
-        position: static;
-        top: auto;
-        left: auto;
-        right: auto;
         width: 100%;
-        max-width: 20rem;
+        max-height: 0;
-        min-width: 0;
+        overflow: hidden;
-        margin: 4px auto 0;
+        margin: 0;
-        padding: 8px 12px 10px;
+        padding: 0;
-        box-shadow: none;
+        opacity: 0;
-        border-radius: 10px;
+        border: 0;
-        background: rgba(255, 255, 255, 0.06);
+        border-top: 1px solid transparent;
+        border-radius: 0;
+        background: transparent;
         box-sizing: border-box;
-        align-self: center;
+        pointer-events: none;
+        transition:
+            max-height 0.28s ease,
+            opacity 0.22s ease,
+            border-color 0.28s ease;
+    }
+
+    .portal-nav.portal-nav--open>ul>li.open>.portal-submenu {
+        max-height: min(70vh, 28rem);
+        opacity: 1;
+        border-top-color: rgba(255, 255, 255, 0.92);
+        pointer-events: auto;
     }
 
     .portal-nav .portal-submenu .portal-nav__subgroup {
         width: 100%;
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         margin-top: 0;
         padding-top: 0;
         border-top: 0;
     }
 
-    .portal-nav .portal-submenu .portal-nav__subgroup+.portal-nav__subgroup {
+    .portal-nav.portal-nav--open .portal-submenu .portal-nav__subgroup+.portal-nav__subgroup {
-        margin-top: 6px;
+        margin-top: 0;
-        padding-top: 8px;
+        padding-top: 0;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-top: 0;
     }
 
     .portal-nav .portal-submenu .portal-nav__subgroup-head,
     .portal-nav .portal-nav__subgroup-head--nested {
         width: 100%;
-        padding: 8px 12px !important;
+        min-height: 44px;
+        padding: 0 12px !important;
         justify-content: center;
+        align-items: center;
         text-align: center;
+        line-height: 1.25;
         box-sizing: border-box;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    }
+
+    .portal-nav.portal-nav--open .portal-submenu .portal-nav__subgroup:last-child>.portal-nav__subgroup-head {
+        border-bottom: 0;
+    }
+
+    .portal-nav.portal-nav--open .portal-submenu .portal-nav__subgroup-head,
+    .portal-nav.portal-nav--open .portal-nav__subgroup-head--nested {
+        color: rgba(210, 210, 210, 0.78);
+        font-size: 0.9rem;
+        font-weight: 600;
+    }
+
+    .portal-nav.portal-nav--open .portal-submenu .portal-nav__subgroup-head .portal-nav__label,
+    .portal-nav.portal-nav--open .portal-nav__subgroup-head--nested .portal-nav__label {
+        display: block;
+        line-height: 1.25;
     }
 
     .portal-nav .portal-submenu .portal-nav__subgroup-head::after,
@@ -681,66 +720,81 @@ nav a {
         display: none;
     }
 
-    .portal-nav .portal-nav__subgroup>.portal-submenu-nested,
+    .portal-nav.portal-nav--open .portal-nav__subgroup {
-    .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
-    .portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
-        position: static !important;
-        display: none;
-        width: 100%;
-        min-width: 0;
-        max-width: none;
-        margin: 8px 0 0;
-        padding: 8px 0 0;
-        border: 0;
-        border-top: 1px solid rgba(255, 204, 0, 0.28);
-        border-radius: 0;
-        box-shadow: none;
-        left: auto !important;
-        align-items: center;
-    }
-
-    .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
-    .portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
-        display: none;
-    }
-
-    .portal-nav .portal-nav__subgroup.open>.portal-submenu-nested {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .portal-nav.portal-nav--open .portal-nav__subgroup>.portal-submenu-nested {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+        max-height: 0;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        opacity: 0;
+        border: 0 solid transparent;
+        background: transparent;
+        pointer-events: none;
+        transition:
+            max-height 0.24s ease,
+            opacity 0.2s ease,
+            margin 0.24s ease,
+            padding 0.24s ease,
+            border-color 0.24s ease;
+    }
+
+    .portal-nav.portal-nav--open .portal-nav__subgroup.open>.portal-submenu-nested {
+        max-height: min(50vh, 20rem);
+        opacity: 1;
+        margin-top: 8px;
+        padding-top: 8px;
+        border-top: 1px solid rgba(255, 204, 0, 0.28);
+        pointer-events: auto;
     }
 
     .portal-nav .portal-submenu .portal-nav__subgroup-head {
         cursor: pointer;
     }
 
-    .portal-nav .portal-submenu-nested--tier3,
+    .portal-nav.portal-nav--open .portal-nav__subgroup--nested {
-    .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
-    .portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 {
-        position: static !important;
-        display: none;
-        width: 100%;
-        min-width: 0;
-        max-width: none;
-        margin: 8px 0 0;
-        padding: 6px 0 0;
-        border: 0;
-        border-top: 1px solid rgba(255, 180, 0, 0.32);
-        border-radius: 0;
-        box-shadow: none;
-        left: auto !important;
-        align-items: center;
-    }
-
-    .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
-    .portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 {
-        display: none;
-    }
-
-    .portal-nav .portal-nav__subgroup--nested.open>.portal-submenu-nested--tier3 {
         display: flex;
         flex-direction: column;
         align-items: center;
+        width: 100%;
+    }
+
+    .portal-nav.portal-nav--open .portal-submenu-nested--tier3 {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+        max-height: 0;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        opacity: 0;
+        border: 0 solid transparent;
+        pointer-events: none;
+        transition:
+            max-height 0.22s ease,
+            opacity 0.18s ease,
+            margin 0.22s ease,
+            padding 0.22s ease,
+            border-color 0.22s ease;
+    }
+
+    .portal-nav.portal-nav--open .portal-nav__subgroup--nested.open>.portal-submenu-nested--tier3 {
+        max-height: min(40vh, 14rem);
+        opacity: 1;
+        margin-top: 6px;
+        padding-top: 6px;
+        border-top: 1px solid rgba(255, 180, 0, 0.32);
+        pointer-events: auto;
     }
 
     .portal-nav .portal-submenu,
@@ -1930,8 +1984,28 @@ footer a .mark_b {
     .map-page .portal-nav .portal-submenu .portal-nav__subgroup-head,
     .map-page .portal-nav .portal-nav__subgroup-head--nested {
         justify-content: center;
+        align-items: center;
         text-align: center;
     }
+
+    .map-page .portal-nav.portal-nav--open .portal-submenu .portal-nav__subgroup-head,
+    .map-page .portal-nav.portal-nav--open .portal-nav__subgroup-head--nested {
+        align-items: center;
+        text-align: center;
+        padding-left: 12px !important;
+        padding-right: 12px !important;
+    }
+
+    .map-page .portal-nav.portal-nav--open .portal-submenu,
+    .map-page .portal-nav.portal-nav--open .portal-submenu-nested {
+        position: static !important;
+        left: auto !important;
+        right: auto !important;
+    }
+
+    .map-page .portal-nav.portal-nav--open>ul>li.open>.portal-submenu {
+        background: transparent !important;
+    }
 }
 
 .map-page .portal-nav>ul>li>a[data-coming-soon="true"]:hover,
@@ -2343,7 +2417,7 @@ header.map-archive-header {
         padding-bottom: 0.8rem;
     }
 
-    .map-page .portal-nav .portal-submenu {
+    .map-page .portal-nav:not(.portal-nav--open) .portal-submenu {
         position: static;
         min-width: 0;
         margin-top: 6px;
@@ -2353,7 +2427,7 @@ header.map-archive-header {
         padding: 8px;
     }
 
-    .map-page .portal-nav>ul>li.open .portal-submenu {
+    .map-page .portal-nav:not(.portal-nav--open)>ul>li.open .portal-submenu {
         display: grid;
     }