support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-07-02 07:03:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: perfects mobile menu and nav
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-09-03 01:39:25 -04:00
parent a3c642d9fe
commit 9275ae82db
7 changed files with 336 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

67
about.html
View file

@ -363,15 +363,18 @@
</div>
</div>
<!-- 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">
<!-- 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">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
</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>
@ -384,10 +387,32 @@
<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">
<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>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<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>
</div>
</div>
</div>
</div>
</div>
@ -1289,6 +1314,24 @@
/* 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; }
/* Hide menu outline on mobile */
@media (max-width: 768px) {
.menu-outline {
display: none !important;
}
/* Create a proper button container for mobile */
#menuGrid {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
padding: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(4px) !important;
}
}
.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; }
@ -1435,27 +1478,31 @@
});
});
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu && menuGrid) {
if (menuToggle && navMenu) {
let isMenuOpen = false;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
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");