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

128
index.html
View file

@ -35,7 +35,7 @@
>KH3</span
>
</a>
</div>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
@ -54,7 +54,7 @@
"
>
<span class="md:hidden">HOME</span>
<span
<span
class="hidden md:inline"
style="
animation-delay: 0.05s;
@ -63,7 +63,7 @@
"
>H</span
>
<span
<span
class="hidden md:inline"
style="
animation-delay: 0.075s;
@ -93,8 +93,8 @@
</a>
<!-- WHY - Slightly right -->
<a
href="about.html"
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
@ -134,8 +134,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
@ -266,8 +266,8 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
<a
href="contact.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
@ -393,17 +393,23 @@
<div class="menu-outline" aria-hidden="true"></div>
<div
class="grid grid-cols-3 gap-1 w-6 h-6 relative"
id="menuGrid"
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"
>
<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>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
</div>
@ -438,7 +444,7 @@
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
></div>
<div class="w-px h-8 bg-kh3-red"></div>
</div>
</div>
<div class="flex items-center h-16">
<span
class="text-xs md:text-sm tracking-widest text-neutral-400"
@ -517,18 +523,18 @@
<div class="flex items-center gap-4">
<a
href="about.html"
data-trans
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Why</a
>
<a
href="contact.html"
data-trans
<a
href="contact.html"
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Contacts</a
>
</div>
</div>
>
</div>
</div>
</div>
</div>
@ -539,7 +545,7 @@
>
<a
class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
href="about.html"
href="about.html"
data-trans
>
Why
@ -560,9 +566,9 @@
WHO
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
</div>
</section>
</div>
</div>
<!-- Custom Cursor -->
<div
@ -607,6 +613,13 @@
z-index: 1;
pointer-events: none;
}
/* Icon swap (homepage only): show petal when wrapper has .open */
#menuWrap.open #menuPetal {
opacity: 1;
}
#menuWrap.open #menuGrid {
opacity: 0;
}
.menu-outline {
position: absolute;
inset: 0;
@ -883,18 +896,8 @@
const navEl = document.getElementById("navMenu");
const gridEl = document.getElementById("menuGrid");
if (navEl) navEl.classList.add("hidden");
if (gridEl) {
gridEl.innerHTML = `
<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>`;
}
const wrapEl = document.getElementById("menuWrap");
if (wrapEl) wrapEl.classList.remove("open");
});
// Enhanced slide + zoom hero image transitions
@ -967,6 +970,7 @@
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;
@ -975,21 +979,12 @@
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<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>
`;
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu (keep button static)
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;
}
});
@ -998,17 +993,7 @@
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<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>
`;
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
}
});
@ -1089,20 +1074,9 @@
// Close nav if it was left open and reset grid icon
const navMenuEl = document.getElementById("navMenu");
const menuGridEl = document.getElementById("menuGrid");
const wrapEl2 = document.getElementById("menuWrap");
if (navMenuEl) navMenuEl.classList.add("hidden");
if (menuGridEl) {
menuGridEl.innerHTML = `
<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>`;
}
if (wrapEl2) wrapEl2.classList.remove("open");
});
// Menu grid animation sequence