41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
|
/* Burger-Navigation: Toggle mit aria-expanded, Escape schließt, Klick auf Link schließt. */
|
||
|
|
(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var toggle = document.querySelector('.site-nav__toggle');
|
||
|
|
var list = document.getElementById('site-nav-list');
|
||
|
|
if (!toggle || !list) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
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';
|
||
|
|
}
|
||
|
|
|
||
|
|
toggle.addEventListener('click', function () {
|
||
|
|
setOpen(toggle.getAttribute('aria-expanded') !== 'true');
|
||
|
|
});
|
||
|
|
|
||
|
|
list.addEventListener('click', function (event) {
|
||
|
|
if (event.target.closest('a')) {
|
||
|
|
setOpen(false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('keydown', function (event) {
|
||
|
|
if (event.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
|
||
|
|
setOpen(false);
|
||
|
|
toggle.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Beim Vergrößern auf Desktop offenes Overlay zurücksetzen.
|
||
|
|
window.addEventListener('resize', function () {
|
||
|
|
if (window.innerWidth > 1249 && toggle.getAttribute('aria-expanded') === 'true') {
|
||
|
|
setOpen(false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})();
|