Sprach- und Konto-Dropdown öffnen jetzt automatisch beim Drüberfahren
Bisher musste man auf "Deutsch ▾" bzw. das Konto-Menü in der Kopfzeile klicken, damit sich das Untermenü öffnet. Jetzt reicht auf dem Desktop einfaches Drüberfahren mit der Maus (mit kurzer Schließverzögerung beim Verlassen, damit der Wechsel vom Button zum Menü nicht sofort wieder zuklappt) — Klick funktioniert als Fallback für Touch-Geräte/Tastatur weiterhin ganz normal. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
fec6626d1a
commit
28ded7faae
@@ -79,6 +79,28 @@ function globeStyle(l: Locale) {
|
|||||||
el.classList.toggle("open");
|
el.classList.toggle("open");
|
||||||
btn.setAttribute("aria-expanded", el.classList.contains("open") ? "true" : "false");
|
btn.setAttribute("aria-expanded", el.classList.contains("open") ? "true" : "false");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Öffnet zusätzlich automatisch beim Drüberfahren mit der Maus (Desktop) — kein Klick mehr
|
||||||
|
// nötig. Kurze Schließverzögerung beim Verlassen, damit der Wechsel von Button zu Menü nicht
|
||||||
|
// sofort wieder zuklappt. Klick bleibt als Fallback für Touch-Geräte/Tastatur erhalten.
|
||||||
|
let closeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
el.addEventListener("mouseenter", () => {
|
||||||
|
if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
|
||||||
|
document.querySelectorAll(".lang-switch.open").forEach((other) => {
|
||||||
|
if (other !== el) {
|
||||||
|
other.classList.remove("open");
|
||||||
|
other.querySelector(".lang-switch-btn")?.setAttribute("aria-expanded", "false");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
el.classList.add("open");
|
||||||
|
btn?.setAttribute("aria-expanded", "true");
|
||||||
|
});
|
||||||
|
el.addEventListener("mouseleave", () => {
|
||||||
|
closeTimer = setTimeout(() => {
|
||||||
|
el.classList.remove("open");
|
||||||
|
btn?.setAttribute("aria-expanded", "false");
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
document.addEventListener("click", () => {
|
document.addEventListener("click", () => {
|
||||||
document.querySelectorAll(".lang-switch.open").forEach((el) => el.classList.remove("open"));
|
document.querySelectorAll(".lang-switch.open").forEach((el) => el.classList.remove("open"));
|
||||||
|
|||||||
@@ -227,6 +227,23 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
|||||||
const open = menu?.classList.toggle("open");
|
const open = menu?.classList.toggle("open");
|
||||||
menuBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
menuBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Öffnet zusätzlich automatisch beim Drüberfahren mit der Maus (Desktop) — kein Klick mehr
|
||||||
|
// nötig. Kurze Schließverzögerung beim Verlassen, damit der Wechsel von Button zu Menü nicht
|
||||||
|
// sofort wieder zuklappt. Klick bleibt als Fallback für Touch-Geräte/Tastatur erhalten.
|
||||||
|
let accountCloseTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
menu?.addEventListener("mouseenter", () => {
|
||||||
|
if (accountCloseTimer) { clearTimeout(accountCloseTimer); accountCloseTimer = null; }
|
||||||
|
menu.classList.add("open");
|
||||||
|
menuBtn?.setAttribute("aria-expanded", "true");
|
||||||
|
});
|
||||||
|
menu?.addEventListener("mouseleave", () => {
|
||||||
|
accountCloseTimer = setTimeout(() => {
|
||||||
|
menu.classList.remove("open");
|
||||||
|
menuBtn?.setAttribute("aria-expanded", "false");
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener("click", () => {
|
document.addEventListener("click", () => {
|
||||||
menu?.classList.remove("open");
|
menu?.classList.remove("open");
|
||||||
menuBtn?.setAttribute("aria-expanded", "false");
|
menuBtn?.setAttribute("aria-expanded", "false");
|
||||||
|
|||||||
Reference in New Issue
Block a user