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

68
index.html
View file

@ -372,13 +372,13 @@
</a>
</div>
<!-- Menu Grid -->
<!-- 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 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
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">
<!-- 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>
@ -406,6 +406,25 @@
<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>
@ -621,6 +640,23 @@
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 .wave {
position: absolute;
inset: 0;
@ -805,6 +841,23 @@
opacity: 1;
}
}
/* Hero section class for targeting */
.hero-section {
/* This class will be added to the hero section for targeting */
}
/* Mobile menu button styling */
@media (max-width: 768px) {
#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;
}
}
</style>
<script src="js/main.js"></script>
@ -957,10 +1010,11 @@
// 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", () => {
@ -970,7 +1024,7 @@
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu (keep button static)
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;