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:
@@ -4,7 +4,10 @@ declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Hauptnavigation aus data/navigation.json. Props: $current (Slug).
|
||||
* Burger-Toggle übernimmt assets/js/nav.js (aria-expanded/aria-controls).
|
||||
* Burger-Toggle + Dropdowns übernimmt assets/js/nav.js.
|
||||
* Dropdowns funktionieren auch ohne JS (CSS :hover / :focus-within); JS ergänzt
|
||||
* nur aria-expanded, Escape und Klick-außerhalb-schließt.
|
||||
* CTAs rendert der Header (site-header__actions) — nicht hier.
|
||||
*/
|
||||
$nav = json_load('navigation');
|
||||
|
||||
@@ -20,14 +23,32 @@ $href = static function (string $slug): string {
|
||||
</button>
|
||||
<ul class="site-nav__list" id="site-nav-list">
|
||||
<?php foreach ($nav['main'] as $item): ?>
|
||||
<li>
|
||||
<?php if (!empty($item['children'])): ?>
|
||||
<?php
|
||||
$submenuId = 'submenu-' . preg_replace('/[^a-z0-9]+/', '-', strtolower($item['label']));
|
||||
$childActive = false;
|
||||
foreach ($item['children'] as $child) {
|
||||
if ($child['slug'] === $current) {
|
||||
$childActive = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
?>
|
||||
<li class="site-nav__item site-nav__item--has-submenu">
|
||||
<button class="site-nav__sublink" type="button" aria-expanded="false" aria-controls="<?= e($submenuId) ?>"<?= $childActive ? ' data-current' : '' ?>><?= e($item['label']) ?><?= icon('chevron-down', 'site-nav__chevron') ?></button>
|
||||
<ul class="site-nav__submenu" id="<?= e($submenuId) ?>">
|
||||
<?php foreach ($item['children'] as $child): ?>
|
||||
<li>
|
||||
<a href="<?= e($href($child['slug'])) ?>"<?= $child['slug'] === $current ? ' aria-current="page"' : '' ?>><?= e($child['label']) ?></a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</li>
|
||||
<?php else: ?>
|
||||
<li class="site-nav__item">
|
||||
<a href="<?= e($href($item['slug'])) ?>"<?= $item['slug'] === $current ? ' aria-current="page"' : '' ?>><?= e($item['label']) ?></a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php foreach ($nav['ctas'] ?? [] as $cta): ?>
|
||||
<li class="site-nav__cta">
|
||||
<?php component('cta', ['cta' => $cta]); ?>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -1,15 +1,28 @@
|
||||
{
|
||||
"main": [
|
||||
{ "label": "Startseite", "slug": "" },
|
||||
{ "label": "Aktuelles", "slug": "#aktuelles" },
|
||||
{ "label": "Jugendfußball", "slug": "jugendfussball" },
|
||||
{ "label": "Fußball", "slug": "fussball" },
|
||||
{
|
||||
"label": "Fußball",
|
||||
"slug": "fussball",
|
||||
"children": [
|
||||
{ "label": "Übersicht", "slug": "fussball" },
|
||||
{ "label": "1. Mannschaft", "slug": "fussball/erste-mannschaft" },
|
||||
{ "label": "2. Mannschaft", "slug": "fussball/zweite-mannschaft" },
|
||||
{ "label": "Damenmannschaft", "slug": "fussball/damen" },
|
||||
{ "label": "Jugendfußball", "slug": "jugendfussball" }
|
||||
]
|
||||
},
|
||||
{ "label": "Turnen", "slug": "turnen" },
|
||||
{ "label": "Der Verein", "slug": "der-verein" },
|
||||
{ "label": "Matchcenter", "slug": "matchcenter" }
|
||||
{
|
||||
"label": "Der Verein",
|
||||
"slug": "verein",
|
||||
"children": [
|
||||
{ "label": "Übersicht", "slug": "verein" },
|
||||
{ "label": "Historie", "slug": "historie" }
|
||||
]
|
||||
}
|
||||
],
|
||||
"ctas": [
|
||||
{ "label": "Kontakt", "slug": "kontakt", "style": "outline" },
|
||||
{ "label": "Mitglied werden", "slug": "mitglied-werden", "style": "primary" }
|
||||
],
|
||||
"legal": [
|
||||
|
||||
@@ -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