feat 漢堡選單全螢幕覆蓋
This commit is contained in:
+30
-1
@@ -450,6 +450,10 @@ nav a {
|
|||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
|
|
||||||
/* 漢堡展開:頂欄主標/子選單皆短字層 → 置中(內文 body 才置左,見 ai-change-boundaries) */
|
/* 漢堡展開:頂欄主標/子選單皆短字層 → 置中(內文 body 才置左,見 ai-change-boundaries) */
|
||||||
|
body.portal-nav-menu-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.portal-nav {
|
.portal-nav {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: 1fr auto;
|
||||||
@@ -462,9 +466,28 @@ nav a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portal-nav.portal-nav--open {
|
.portal-nav.portal-nav--open {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
height: 100dvh;
|
||||||
|
margin: 0;
|
||||||
|
padding:
|
||||||
|
max(0.85rem, env(safe-area-inset-top, 0px))
|
||||||
|
clamp(14px, 2vw + 10px, 32px)
|
||||||
|
max(1rem, env(safe-area-inset-bottom, 0px));
|
||||||
|
z-index: 10000;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
background-color: var(--black);
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"head head"
|
"head head"
|
||||||
"menu menu";
|
"menu menu";
|
||||||
|
align-content: start;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portal-nav .logo {
|
.portal-nav .logo {
|
||||||
@@ -509,7 +532,13 @@ nav a {
|
|||||||
|
|
||||||
.portal-nav.portal-nav--open>ul {
|
.portal-nav.portal-nav--open>ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 10px;
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portal-nav>ul>li {
|
.portal-nav>ul>li {
|
||||||
|
|||||||
@@ -36,6 +36,11 @@
|
|||||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||||
toggle.setAttribute("aria-label", open ? "關閉選單" : "開啟選單");
|
toggle.setAttribute("aria-label", open ? "關閉選單" : "開啟選單");
|
||||||
}
|
}
|
||||||
|
if (!isPortalNavDesktop()) {
|
||||||
|
document.body.classList.toggle("portal-nav-menu-open", open);
|
||||||
|
} else {
|
||||||
|
document.body.classList.remove("portal-nav-menu-open");
|
||||||
|
}
|
||||||
if (!open) {
|
if (!open) {
|
||||||
nav.querySelectorAll(":scope > ul > li.open, .portal-nav__subgroup.open").forEach((el) => {
|
nav.querySelectorAll(":scope > ul > li.open, .portal-nav__subgroup.open").forEach((el) => {
|
||||||
el.classList.remove("open");
|
el.classList.remove("open");
|
||||||
|
|||||||
Reference in New Issue
Block a user