Du hast vermutlich immer noch das im Code stehen:
function closeDropdownMenu() {
headnavMenue.forEach((drop) => {
Im Original findt sich dort aber die Array-Konstante dropdown:
function closeDropdownMenu() {
dropdown.forEach((drop) => {
Stimmt, ich habe beide Namen, auch dropdownButton, unten bei den beiden function-Codes korrigiert, also die Array-Varianten stehen dort jetzt.
Den letzten ausgeklappten Link, ganz unten (bei mir zu Hause der Kontakt-Link) habe ich zum Ankerlink #top gemacht. Das ist auf meiner Seite der ohnehin schon existierende nach-oben-Link. Gute Idee von dir.
Du möchtest anscheinend, dass bei einem "Esc" auch das Gesamtmenü schließt. Diese Funktionalität ist in dem Script aber nicht enthalten. Möglicherweise, weil diese auf die Mobile-View begrenzt werden muss, was die Umsetzung etwas aufwendiger macht.
Ich vermute, dass ESC zum Schließen eines
Gesamtmenüs genau so viel Sinn macht, wie zum Schließen eines Untermenüs, oder?
Dann ja.
Dass das freecode-Beispiel damit ein Mal mehr auf mein "einfaches Gesamtmenü" angepasst werden muss, weil es eine komplexere, zusätzliche Untermenü-Struktur hat, kann natürlich sein. Muss dadurch der Code des 3. Close-Grundes ganz anders gestaltet werden? Er greift wie die beiden anderen Close-Gründe auf die zwei Funktionen closeDropdownMenu und setAriaExpandedFalse zu. Das wäre gut, wenn es so bliebe, aber wenn es dadurch recht kompliziert wird...
Oder hat das vielleicht irgendwie damit zu tun, dass freecode eine gemeinsame Klasse "menu" für sowohl nav als auch div (in dem ul drinsteckt) zu tun? Vielleicht kann man mit so einer gemeinsamen Klasse für zweiversch. Elemente ggf. etwas deichseln. Nur eine Idee...
Mit dem folgenden, gesamten JS-Code, kommt jetzt zwar keine Fehlermeldung mehr, aber es klappen leider neben ESC auch die beiden anderen Close-Gründe noch immer nicht. Nur das Toggle-Schließen auf den Button klappt.
// button, ul der headnav, ul-Links der headnav als Konstanten definiert, selektiert mit ihren Klassen
// menueLinks brauche ich für close-Grund 1
const dropdownButton = [];
const dropdownMenue = [];
const headnavButton = document.querySelector('.headnav-button');
const headnavMenue = document.querySelector('.headnav-haupt-ul');
const menueLinks = document.querySelectorAll('.headnav-haupt-ul li a');
// Button bekommt eine EventListener-Klick-Funktion zugewiesen und ihr Name festgelegt
headnavButton.addEventListener("click", toggleButton);
// Jetzt wird die Funktion "toggleButton" definiert, angelehnt an freecode-Bsp.
// Ist die Bedingung für false erfüllt, wird true zurückgegeben, sonst false
function toggleButton() {
headnavMenue.classList.toggle("menue-zeigen"); //im MQ neu angelegte Klasse, die das Menü zeigt
headnavButton.setAttribute(
"aria-expanded",
headnavButton.getAttribute("aria-expanded") === "false" ? "true" : "false"
);
}
// Zweite Funktion, angelehnt an freecode-Bsp., dropdownBtn durch headnavButton ersetzt
function setAriaExpandedFalse() {
dropdownButton.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
}
// Dritte Funktion, angelehnt an freecode-Bsp., dropdown durch headnavMenue ersetzt
function closeDropdownMenu() {
dropdownMenue.forEach((drop) => {
drop.classList.remove("active");
drop.addEventListener("click", (e) => e.stopPropagation());
});
}
// close-Grund 1: close dropdown menu when the dropdown links are clicked
menueLinks.forEach((link) =>
link.addEventListener("click", () => {
closeDropdownMenu();
setAriaExpandedFalse();
})
);
// close-Grund 2: close dropdown menu when you click on the document body
document.documentElement.addEventListener("click", () => {
closeDropdownMenu();
setAriaExpandedFalse();
});
// close-Grund 3: close dropdown when the escape key is pressed
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
closeDropdownMenu();
setAriaExpandedFalse();
}
});