// Mega Menu Functionality - Fast open, instant close
document.addEventListener('DOMContentLoaded', function() {
const navItems = document.querySelectorAll('.custom-nav-item');
let activeDropdown = null;
let openTimer = null;
navItems.forEach(item => {
const link = item.querySelector('.custom-nav-link');
const dropdown = item.querySelector('.mega-dropdown');
// Show dropdown on hover with fast slide
item.addEventListener('mouseenter', function() {
// Close any currently open dropdown INSTANTLY (no transition)
if (activeDropdown && activeDropdown !== dropdown) {
activeDropdown.style.transition = 'none';
activeDropdown.classList.remove('active');
// Force reflow
void activeDropdown.offsetWidth;
activeDropdown.style.transition = '';
activeDropdown = null;
}
// Clear any existing timer
clearTimeout(openTimer);
// Open new dropdown with fast animation
openTimer = setTimeout(() => {
dropdown.classList.add('active');
activeDropdown = dropdown;
}, 200);
});
// Hide dropdown instantly when mouse leaves menu item
item.addEventListener('mouseleave', function() {
clearTimeout(openTimer);
// Don't close if moving to dropdown content
setTimeout(() => {
if (!dropdown.matches(':hover') && !item.matches(':hover')) {
// Remove instantly without slide up
dropdown.style.transition = 'none';
dropdown.classList.remove('active');
// Force reflow
void dropdown.offsetWidth;
dropdown.style.transition = '';
if (activeDropdown === dropdown) {
activeDropdown = null;
}
}
}, 10);
});
// Keep dropdown open when hovering over it
dropdown.addEventListener('mouseenter', function() {
clearTimeout(openTimer);
});
dropdown.addEventListener('mouseleave', function() {
// Close instantly when leaving dropdown
setTimeout(() => {
if (!dropdown.matches(':hover') && !item.matches(':hover')) {
// Remove instantly without slide up
dropdown.style.transition = 'none';
dropdown.classList.remove('active');
// Force reflow
void dropdown.offsetWidth;
dropdown.style.transition = '';
if (activeDropdown === dropdown) {
activeDropdown = null;
}
}
}, 10);
});
// Touch devices
link.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
// Close other dropdowns
document.querySelectorAll('.mega-dropdown').forEach(otherDropdown => {
if (otherDropdown !== dropdown) {
otherDropdown.classList.remove('active');
}
});
// Toggle current dropdown
dropdown.classList.toggle('active');
}
});
});
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
if (!e.target.closest('.custom-nav-item') && !e.target.closest('.mega-dropdown')) {
document.querySelectorAll('.mega-dropdown').forEach(dropdown => {
dropdown.style.transition = 'none';
dropdown.classList.remove('active');
// Force reflow
void dropdown.offsetWidth;
dropdown.style.transition = '';
});
activeDropdown = null;
}
});
});
