function toggleMenu() { var menuContent = document.getElementById('menu-content'); var iconImage1 = document.getElementById('icon-image-1'); var iconImage2 = document.getElementById('icon-image-2'); var iconImageOpen = document.getElementById('icon-image-open'); if (menuContent.style.display === 'none' || menuContent.style.display === '') { menuContent.style.display = 'block'; setTimeout(function() { menuContent.style.opacity = 1; menuContent.style.transform = 'translateY(0)'; }, 10); // Ritardo per iniziare l'animazione dopo il display block iconImage1.style.display = 'none'; iconImage2.style.display = 'none'; iconImageOpen.style.display = 'block'; iconImageOpen.classList.add('rotate-in'); setTimeout(() => iconImageOpen.classList.remove('rotate-in'), 300); // Rimuove l'animazione dopo il suo completamento } else { menuContent.style.opacity = 0; menuContent.style.transform = 'translateY(-20px)'; setTimeout(function() { menuContent.style.display = 'none'; }, 500); // Attende il completamento della transizione per nascondere iconImage1.style.display = 'block'; iconImage2.style.display = 'block'; iconImageOpen.style.display = 'none'; iconImage1.classList.add('rotate-out'); iconImage2.classList.add('rotate-out'); setTimeout(() => { iconImage1.classList.remove('rotate-out'); iconImage2.classList.remove('rotate-out'); }, 300); // Rimuove l'animazione dopo il suo completamento } } window.addEventListener('scroll', function() { var scrollPosition = window.scrollY; var iconImage1 = document.getElementById('icon-image-1'); var iconImage2 = document.getElementById('icon-image-2'); if (scrollPosition > 480) { // Cambia la condizione di scroll a 350px iconImage1.style.opacity = 0; iconImage2.style.opacity = 1; } else { iconImage1.style.opacity = 1; iconImage2.style.opacity = 0; } }); document.addEventListener("DOMContentLoaded", () => { const flagContainer = document.querySelector(".flag-container"); if (!flagContainer) return; // Assicura che il container esista let hoverTimeout; // Mostra le bandiere su hover (desktop) flagContainer.addEventListener("mouseenter", () => { clearTimeout(hoverTimeout); // Annulla eventuali timeout flagContainer.classList.add("hover-active"); // Mostra le bandiere }); // Nasconde le bandiere al mouse leave (desktop) flagContainer.addEventListener("mouseleave", () => { hoverTimeout = setTimeout(() => { flagContainer.classList.remove("hover-active"); // Nasconde le bandiere }, 300); }); // Mostra e nasconde le bandiere su tap (mobile/tablet) flagContainer.addEventListener("click", () => { if (!flagContainer.classList.contains("hover-active")) { flagContainer.classList.add("hover-active"); // Mostra le bandiere setTimeout(() => { flagContainer.classList.remove("hover-active"); // Nasconde le bandiere dopo 2 secondi }, 2000); } else { flagContainer.classList.remove("hover-active"); // Nasconde immediatamente se già visibile } }); // Nasconde le bandiere al tap fuori dal container (mobile/tablet) document.addEventListener("touchstart", (e) => { if (!flagContainer.contains(e.target)) { flagContainer.classList.remove("hover-active"); } }); });