Navigation: Dropdown-Untermenüs für Fußball und Verein
navigation.json gruppiert Fußball (Übersicht, Mannschaften, Jugend) und Verein (Übersicht, Historie) als children. nav.php rendert Disclosure-Buttons mit aria-expanded/-controls; ohne JS per CSS :hover/:focus-within bedienbar. nav.js ergänzt Toggle, Escape (Untermenü zuerst, dann Overlay) und Klick-außerhalb-schließt. Kontakt-CTA aus der Nav entfernt. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
This commit is contained in:
@@ -1,4 +1,7 @@
|
||||
/* Burger-Navigation: Toggle mit aria-expanded, Escape schließt, Klick auf Link schließt. */
|
||||
/* Navigation: Burger-Overlay (aria-expanded, Escape, Klick auf Link schließt)
|
||||
+ Dropdown-Untermenüs als Disclosure (Klick togglet aria-expanded).
|
||||
Die Untermenüs sind auch ohne JS per CSS (:hover/:focus-within) bedienbar;
|
||||
JS macht den Zustand für Screenreader sichtbar und ergänzt Escape/Außerklick. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
@@ -8,10 +11,23 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var subToggles = Array.prototype.slice.call(list.querySelectorAll('.site-nav__sublink'));
|
||||
|
||||
function closeSubmenus(except) {
|
||||
subToggles.forEach(function (btn) {
|
||||
if (btn !== except) {
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setOpen(open) {
|
||||
toggle.setAttribute('aria-expanded', String(open));
|
||||
document.body.classList.toggle('nav-open', open);
|
||||
toggle.querySelector('.visually-hidden').textContent = open ? 'Menü schließen' : 'Menü öffnen';
|
||||
if (!open) {
|
||||
closeSubmenus(null);
|
||||
}
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', function () {
|
||||
@@ -24,14 +40,43 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Dropdown-Buttons: togglen ihr eigenes Untermenü, schließen die anderen.
|
||||
subToggles.forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var open = btn.getAttribute('aria-expanded') === 'true';
|
||||
closeSubmenus(btn);
|
||||
btn.setAttribute('aria-expanded', String(!open));
|
||||
});
|
||||
});
|
||||
|
||||
// Klick außerhalb eines Dropdowns schließt offene Untermenüs.
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!event.target.closest('.site-nav__item--has-submenu')) {
|
||||
closeSubmenus(null);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
|
||||
if (event.key !== 'Escape') {
|
||||
return;
|
||||
}
|
||||
// Zuerst ein offenes Untermenü schließen (Fokus zurück auf seinen Button) …
|
||||
var openSub = subToggles.filter(function (btn) {
|
||||
return btn.getAttribute('aria-expanded') === 'true';
|
||||
})[0];
|
||||
if (openSub) {
|
||||
openSub.setAttribute('aria-expanded', 'false');
|
||||
openSub.focus();
|
||||
return;
|
||||
}
|
||||
// … sonst das Burger-Overlay.
|
||||
if (toggle.getAttribute('aria-expanded') === 'true') {
|
||||
setOpen(false);
|
||||
toggle.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Beim Vergrößern auf Desktop offenes Overlay zurücksetzen.
|
||||
// Beim Vergrößern auf Desktop offenes Overlay/Untermenüs zurücksetzen.
|
||||
window.addEventListener('resize', function () {
|
||||
if (window.innerWidth > 1249 && toggle.getAttribute('aria-expanded') === 'true') {
|
||||
setOpen(false);
|
||||
|
||||
Reference in New Issue
Block a user