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
179
projects.html
179
projects.html
|
|
@ -370,28 +370,35 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle with Transparent Background -->
|
||||
<!-- 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-40"
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
||||
>
|
||||
<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 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>
|
||||
|
|
@ -1136,6 +1143,66 @@
|
|||
.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>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
|
|
@ -1474,93 +1541,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");
|
||||
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>
|
||||
`;
|
||||
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");
|
||||
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>
|
||||
`;
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
}
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue