jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 導覽子選單第二三層向右飛出並修文字擠壓

Browse Source
This commit is contained in:
jekkinoopy
2026-05-16 17:28:16 +08:00
parent 0b9e434163
commit 6df0329649
1 changed files with 83 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+83 -32
View File
@@ -205,13 +205,14 @@ nav a {
color: #3a300a;
}
/* 淪陷瞬間 · 全員發瘋：僅第一層選單向下；第二層起向右飛出（≥1025px），小螢幕改直向堆疊 */
/* 淪陷瞬間 · 全員發瘋：第一層向下；第二／三層向右飛出（≤1024px 改直向堆疊） */
.portal-nav .portal-submenu .portal-nav__subgroup {
position: relative;
z-index: 0;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
list-style: none;
}
.portal-nav .portal-submenu .portal-nav__subgroup:hover {
@@ -227,6 +228,7 @@ nav a {
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0;
white-space: nowrap;
}
.portal-nav .portal-submenu .portal-nav__subgroup-head::after {
@@ -249,14 +251,18 @@ nav a {
flex-direction: column;
gap: 4px;
position: absolute;
left: calc(100% + 3px);
left: calc(100% + 6px);
top: 0;
min-width: 216px;
width: max-content;
max-width: min(280px, 92vw);
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
border: 1px solid rgba(0, 0, 0, 0.06);
z-index: 96;
overflow: visible;
box-sizing: border-box;
}
.portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
@@ -266,6 +272,14 @@ nav a {
.portal-nav .portal-submenu-nested li {
padding-bottom: 0;
list-style: none;
}
.portal-nav .portal-submenu-nested a {
display: block;
width: 100%;
white-space: nowrap;
box-sizing: border-box;
}
.portal-nav .portal-submenu .portal-nav__subgroup--nested {
@@ -274,6 +288,7 @@ nav a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.portal-nav .portal-submenu .portal-nav__subgroup--nested:hover {
@@ -288,6 +303,7 @@ nav a {
font-size: 0.82rem;
color: #4a4a4a;
font-weight: 700;
white-space: nowrap;
}
.portal-nav .portal-nav__subgroup-head--nested::after {
@@ -310,14 +326,17 @@ nav a {
flex-direction: column;
gap: 2px;
position: absolute;
left: calc(100% + 3px);
left: calc(100% + 6px);
top: 0;
min-width: 200px;
width: max-content;
max-width: min(260px, 92vw);
background: #fff;
border-radius: 12px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
border: 1px solid rgba(0, 0, 0, 0.07);
z-index: 102;
box-sizing: border-box;
}
.portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
@@ -336,9 +355,10 @@ nav a {
.portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
.portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
position: static;
display: flex !important;
display: none;
width: 100%;
min-width: 0;
max-width: none;
margin: 8px 0 0;
padding: 8px 0 8px 12px;
border: 0;
@@ -347,18 +367,30 @@ nav a {
box-shadow: none;
}
.portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
.portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
display: flex;
}
.portal-nav .portal-submenu-nested--tier3,
.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;
display: flex !important;
display: none;
width: 100%;
min-width: 0;
max-width: none;
margin: 8px 0 0 10px;
padding: 6px 0 6px 12px;
border: 0;
border-left: 2px solid rgba(255, 180, 0, 0.38);
border-radius: 0;
box-shadow: none;
min-width: 0;
}
.portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
.portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 {
display: flex;
}
}
@@ -471,9 +503,9 @@ a.btn[data-coming-soon="true"],
display: none !important;
}
.portal-nav li:hover>.portal-submenu,
.portal-nav li:focus-within>.portal-submenu,
.portal-nav li.open>.portal-submenu {
.portal-nav>ul>li:hover>.portal-submenu,
.portal-nav>ul>li:focus-within>.portal-submenu,
.portal-nav>ul>li.open>.portal-submenu {
display: grid;
gap: 6px;
}
@@ -513,7 +545,7 @@ footer {
padding: 0.5rem;
}
/* 頂欄主標／副標字級與色見 .site-header-inner（對齊 extra/totoga2-copy-ebook.html） */
/* 頂欄主標／副標見 .site-header-inner；首頁 #origin .hero 內已套相同 class */
.hero p {
font-size: 1.2rem;
@@ -1467,19 +1499,10 @@ footer a .mark_b {
padding-right: 10px;
}
.map-page .portal-nav .portal-submenu .portal-nav__subgroup-head::after {
right: auto;
left: 10px;
}
.map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested {
left: auto;
right: calc(100% + 3px);
}
.map-page .portal-nav .portal-submenu-nested a {
align-items: flex-end;
display: block;
text-align: right;
white-space: nowrap;
}
.map-page .portal-nav .portal-nav__subgroup-head--nested {
@@ -1489,14 +1512,27 @@ footer a .mark_b {
padding-right: 10px;
}
.map-page .portal-nav .portal-nav__subgroup-head--nested::after {
right: auto;
left: 8px;
}
@media (min-width: 1025px) {
.map-page .portal-nav .portal-submenu-nested--tier3 {
left: auto;
right: calc(100% + 3px);
.map-page .portal-nav .portal-submenu .portal-nav__subgroup-head::after {
right: auto;
left: 10px;
}
.map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested {
left: auto;
right: calc(100% + 6px);
}
.map-page .portal-nav .portal-nav__subgroup-head--nested::after {
right: auto;
left: 8px;
}
.map-page .portal-nav li.portal-nav__subgroup--nested>.portal-submenu-nested--tier3 {
left: auto;
right: calc(100% + 6px);
}
}
@media (max-width: 1024px) {
@@ -1558,7 +1594,15 @@ header.map-archive-header {
box-sizing: border-box;
}
/* 全站頂欄標題語彙：黃色氣球底圖上用深灰字（易讀）；套在 .header-inner.site-header-inner，首頁 #origin 內亦然 */
/* 全站頂欄標題語彙：黃色氣球底圖上用深灰字；.header-inner.site-header-inner（首頁 #origin .hero 內同 class） */
.site-header-inner {
width: 100%;
max-width: min(40rem, 94vw);
margin-inline: auto;
text-align: center;
box-sizing: border-box;
}
.site-header-inner .main-title {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 900;
@@ -1569,26 +1613,33 @@ header.map-archive-header {
}
.site-header-inner .subtitle-wrap {
margin-top: 20px;
width: 100%;
margin: 20px auto 0;
padding: 0 0.75rem;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.site-header-inner .subtitle-wrap::before,
.site-header-inner .subtitle-wrap::after {
content: "";
flex: 1;
display: block;
flex: 1 1 56px;
min-width: 28px;
height: 3px;
background-color: #5c5c5c;
max-width: 56px;
opacity: 1;
}
.site-header-inner .sub-title {
flex: 0 0 auto;
font-size: 0.92rem;
letter-spacing: 4px;
color: var(--text-muted, #888);
margin: 0;
margin: 0 18px;
text-transform: uppercase;
}