style nav顯示樣式調整

portal-nav.js

@@ -1,12 +1,25 @@
 (() => {
     /**
-     * ── 頁面籌備中：開關方式 ─────────────────────────────────────────
+     * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
-     * ① 整個檔案先關：COMING_SOON_PAGES 列出主檔名（目前已含長卷／電子書／志源頁／演唱會／典藏／地圖等）。
+     * ① 整個檔案先關：COMING_SOON_PAGES（目前已含長卷／電子書／志源頁／演唱會／典藏／地圖等）。
-     * ② index.html 細到錨點：改 INDEX_NAV_OPEN_HASHES；列在其中的 #才可點，其餘同檔連結為籌備中。
+     * ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
-     * ③ 視覺：「(頁面籌備中)」由 style.css 的 ::after 在 hover／鍵盤 focus 時才顯示，
+     * ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
-     *    title 與 aria-label 供觸控長按／螢幕閱讀器補充說明。
+     *    浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
-     * 要開放某連結：從對應 Set 移除檔名或補上錨點後重新整理。
+     * 要調整詞句：改 NAV_SOON_PHRASES 即可。
      */
+    const NAV_SOON_PHRASES = ["奇蹟醞釀中", "感動載入中"];
+
+    function pickSoonPhrase() {
+        return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
+    }
+
+    /** 每次互動重抽，讀者沿導覽滑動時會交錯看到不同字樣 */
+    function rollSoonLabel(link) {
+        const p = pickSoonPhrase();
+        link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
+        link.setAttribute("title", p);
+    }
+
     const COMING_SOON_PAGES = new Set([
         "chronicle.html",
         "ssg2-ebook.html",
@@ -46,8 +59,13 @@
         const visibleTitle = link.textContent.trim();
         link.setAttribute("data-coming-soon", "true");
         link.setAttribute("aria-disabled", "true");
-        link.setAttribute("title", "頁面籌備中");
+        link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
-        link.setAttribute("aria-label", `${visibleTitle}（頁面籌備中）`);
+
+        const onSoonInteract = () => rollSoonLabel(link);
+        link.addEventListener("pointerenter", onSoonInteract);
+        link.addEventListener("focus", onSoonInteract);
+        link.addEventListener("touchstart", onSoonInteract, { passive: true });
+
         if (!link.dataset.originalHref) {
             link.dataset.originalHref = originalHref;
         }

style.css

@@ -16,6 +16,8 @@
     --text-muted: #888;
     --surface: #fffdf7;
     --surface-soft: #fff9e8;
+    /* 導覽無法進入之提示後備（互動後各連結以 inline 變數覆寫，每次滑過／聚焦重抽） */
+    --portal-nav-soon-msg: "奇蹟醞釀";
 }
 
 /* 1. 先處理 body 和全域，確保沒人亂給外距 */
@@ -124,6 +126,7 @@ nav a:hover {
     background: #ffffff;
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
     z-index: 80;
+    overflow: visible;
 }
 
 .portal-nav .portal-submenu li {
@@ -150,19 +153,19 @@ nav a:hover {
 }
 
 .portal-nav>ul>li.coming-soon>a {
-    cursor: not-allowed;
+    cursor: default;
     opacity: 0.82;
     color: rgba(212, 196, 150, 0.95);
 }
 
 .portal-nav a[data-coming-soon="true"] {
-    cursor: not-allowed;
+    cursor: default;
     opacity: 0.82;
     position: relative;
 }
 
 .portal-nav a[data-coming-soon="true"]::after {
-    content: "(頁面籌備中)";
+    content: var(--portal-nav-soon-msg);
     position: absolute;
     z-index: 120;
     white-space: nowrap;
@@ -185,10 +188,14 @@ nav a:hover {
     transform: translateX(-50%);
 }
 
+/* 子選單：氣泡在列右側外，勿用 top:100% 避免與同列／下一列文字疊在一起 */
 .portal-nav .portal-submenu a[data-coming-soon="true"]::after {
-    left: 50%;
+    left: 100%;
-    top: calc(100% + 2px);
+    right: auto;
-    transform: translateX(-50%);
+    top: 50%;
+    bottom: auto;
+    margin-left: 10px;
+    transform: translateY(-50%);
 }
 
 .portal-nav>ul>li>a[data-coming-soon="true"]:hover,
@@ -931,6 +938,7 @@ footer {
     display: none;
     gap: 6px;
     z-index: 20;
+    overflow: visible;
 }
 
 .map-page .portal-nav>ul>li:hover .portal-submenu,
@@ -963,6 +971,15 @@ footer {
     color: #5f5f5f;
 }
 
+/* 子選單靠右時，氣泡改出現在左側，避免貼齊視窗右緣被裁切 */
+.map-page .portal-nav .portal-submenu a[data-coming-soon="true"]::after {
+    left: auto;
+    right: 100%;
+    margin-left: 0;
+    margin-right: 10px;
+    transform: translateY(-50%);
+}
+
 .map-archive-header {
     width: 100%;
     height: 100vh;