georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: enhance menu toggle structure and animations across multiple HTML files for improved user experience

Browse source
This commit is contained in:
George Birikorang 2025-09-02 07:40:15 -04:00
parent e562661939
commit 9f0d845eef
8 changed files with 360 additions and 535 deletions
Download patch file Download diff file Expand all files Collapse all files

109
services.html
View file

@ -166,6 +166,23 @@
.hero-section {
/* This class will be added to the hero section for targeting */
}
/* 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); }
}
</style>
</head>
<body class="bg-kh3-black text-white font-montserrat">
@ -518,25 +535,33 @@
</a>
</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"
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>
</div>
<!-- Menu Toggle with Homepage/WHY 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">
@ -1084,71 +1109,31 @@
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})();
// 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");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
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>
`;
// 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");
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");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
}
});