refactor: enhance menu toggle structure and animations across multiple HTML files for improved user experience
This commit is contained in:
parent
e562661939
commit
9f0d845eef
8 changed files with 360 additions and 535 deletions
186
about.html
186
about.html
|
|
@ -367,25 +367,33 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle with Transparent Background -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40">
|
||||
<div
|
||||
class="cursor-pointer p-3 transition-transform duration-300"
|
||||
id="menuToggle"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<!-- Menu Toggle with Homepage structure -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="relative inline-block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true">
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
</div>
|
||||
<div class="menu-outline" aria-hidden="true"></div>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
</div>
|
||||
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
||||
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-20">
|
||||
|
|
@ -406,7 +414,7 @@
|
|||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
|
||||
<div class="w-px flex-1 bg-neutral-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title with horizontal ruler -->
|
||||
<div class="pl-28 pr-6 w-full">
|
||||
|
|
@ -1282,6 +1290,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Homepage-style menu outline and waves */
|
||||
#menuWrap { position: relative; overflow: visible; }
|
||||
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
|
||||
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
|
||||
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
|
||||
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
|
||||
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
|
||||
#menuWrap.open #menuPetal { opacity: 1; }
|
||||
#menuWrap.open #menuGrid { opacity: 0; }
|
||||
|
||||
@keyframes waveBurst {
|
||||
0%, 69% { opacity: 0; transform: scale(1); }
|
||||
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
|
||||
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
|
||||
100% { opacity: 0; transform: scale(1.95, 1.75); }
|
||||
}
|
||||
|
||||
/* Diagonal mask reveal for hero image */
|
||||
@keyframes diagMaskReveal {
|
||||
0% {
|
||||
|
|
@ -1424,112 +1449,31 @@
|
|||
});
|
||||
});
|
||||
|
||||
// Menu toggle functionality
|
||||
// Menu toggle functionality (homepage pattern)
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuWrap = document.getElementById("menuWrap");
|
||||
|
||||
if (menuToggle && navMenu && menuGrid) {
|
||||
let isMenuOpen = false;
|
||||
let closeBtnEl = null;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to full grid
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
|
||||
`;
|
||||
menuToggle.style.transform = "scale(1)";
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
}
|
||||
navMenu.classList.add("hidden");
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
// Transform to compressed state - only center 5 dots, corner dots disappear
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
|
||||
`;
|
||||
menuToggle.style.transform = "scale(0.8)";
|
||||
menuToggle.style.transition = "transform 0.3s ease";
|
||||
|
||||
// Place red X close button at the bottom of the menu panel
|
||||
closeBtnEl = document.createElement("button");
|
||||
closeBtnEl.setAttribute("aria-label", "Close navigation");
|
||||
closeBtnEl.className =
|
||||
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
|
||||
closeBtnEl.innerHTML = `
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
`;
|
||||
navMenu.appendChild(closeBtnEl);
|
||||
closeBtnEl.addEventListener("click", () => {
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to full grid
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
`;
|
||||
menuGrid.style.transform = "scale(1)";
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
}
|
||||
isMenuOpen = false;
|
||||
});
|
||||
if (menuWrap) menuWrap.classList.add("open");
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to full grid
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
`;
|
||||
menuGrid.style.transform = "scale(1)";
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
}
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
}
|
||||
});
|
||||
|
|
@ -1630,20 +1574,9 @@
|
|||
cover.style.opacity = "0";
|
||||
}
|
||||
const nav = document.getElementById("navMenu");
|
||||
const grid = document.getElementById("menuGrid");
|
||||
if (nav) nav.classList.add("hidden");
|
||||
if (grid) {
|
||||
grid.innerHTML = `
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
|
||||
<span class=\"w-1 h-1 bg-white rounded-full\"></span>`;
|
||||
}
|
||||
const wrap = document.getElementById("menuWrap");
|
||||
if (wrap) wrap.classList.remove("open");
|
||||
});
|
||||
|
||||
// Also ensure clean state on bfcache restore / pageshow
|
||||
|
|
@ -1652,21 +1585,10 @@
|
|||
cover.style.transform = "translateX(100%)";
|
||||
cover.style.opacity = "0";
|
||||
}
|
||||
const nav = document.getElementById("navMenu");
|
||||
const grid = document.getElementById("menuGrid");
|
||||
if (nav) nav.classList.add("hidden");
|
||||
if (grid) {
|
||||
grid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>`;
|
||||
}
|
||||
const nav2 = document.getElementById("navMenu");
|
||||
if (nav2) nav2.classList.add("hidden");
|
||||
const wrap2 = document.getElementById("menuWrap");
|
||||
if (wrap2) wrap2.classList.remove("open");
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue