74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
// Menu toggle functionality and animations
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const menuToggle = document.getElementById("menuToggle");
|
|
const navMenu = document.getElementById("navMenu");
|
|
const menuWrap = document.getElementById("menuWrap");
|
|
const menuGrid = document.getElementById("menuGrid");
|
|
const menuGridMobile = document.getElementById("menuGridMobile");
|
|
|
|
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");
|
|
if (menuWrap) menuWrap.classList.remove("open");
|
|
isMenuOpen = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Custom cursor functionality
|
|
const customCursor = document.getElementById("customCursor");
|
|
|
|
if (customCursor) {
|
|
// Hide default cursor
|
|
document.body.style.cursor = "none";
|
|
|
|
// Follow mouse movement
|
|
document.addEventListener("mousemove", (e) => {
|
|
customCursor.style.left = e.clientX - 12 + "px";
|
|
customCursor.style.top = e.clientY - 12 + "px";
|
|
});
|
|
|
|
// Menu grid hover effects
|
|
if (menuGrid) {
|
|
menuGrid.addEventListener("mouseenter", () => {
|
|
customCursor.style.borderColor = "#B03037";
|
|
customCursor.style.transform = "scale(1.5)";
|
|
customCursor.style.animation = "spin 0.5s linear infinite";
|
|
});
|
|
|
|
menuGrid.addEventListener("mouseleave", () => {
|
|
customCursor.style.borderColor = "#B03037";
|
|
customCursor.style.transform = "scale(1)";
|
|
customCursor.style.animation = "none";
|
|
});
|
|
}
|
|
}
|
|
|
|
// Add spin animation for cursor
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
@keyframes spin {
|
|
from { transform: scale(1.5) rotate(0deg); }
|
|
to { transform: scale(1.5) rotate(360deg); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|