Zwei Navis (desktop-first), die mobile per Toggle-Klickbutton aus-/einklappen sollen

const navToggle = document.querySelector('.headnav-button');
const navList = document.querySelector('.headnav-haupt-ul');
const navLinks = document.querySelectorAll('.headnav-haupt-ul li a');

In seinem HTML sehe ich ein "hidden"-Attr. beim ul, nicht bei nav, wie er sagt. Nav scheint aber auch niemand sonst zu verwenden dafür.

Ansonsten scheint er gar nichts ein/auszublenden in seinem CSS? Weil mobile-first? Ich sehe auch gar kein MQ.

@media only screen and (min-width: 768px) {
  .headnav-haupt-ul {
    display:block;
  }
  .headnav-button {
    display:none;
  }
}

Sehe ich es richtig, dass ich für meine zwei Navs zwei JavaScripts brauche (jedes mit ein paar Blöcken JS-Code) und man nicht in einem Code beide Navs gleichzeitig behandeln darf/kann/soll?

const navToggle[0] = document.querySelector('.headnav-button');
const navList[0] = document.querySelector('.headnav-haupt-ul');
const navLinks[0] = document.querySelectorAll('.headnav-haupt-ul li a');

const navToggle[1] = document.querySelector('.sidenav-button');
const navList[1] = document.querySelector('.sidenav-haupt-ul');
const navLinks[1] = document.querySelectorAll('.sidenav-haupt-ul li a');

for (let i = 0; i <= 1; i++) {
    navToggle[i].addEventListener('click', function () {
        if (navList[i].hasAttribute('hidden')) {
            this.setAttribute('aria-expanded', 'true');
            navList[i].removeAttribute('hidden');
            navLinks[i][0].focus();
        } else {
            navList[i].setAttribute('hidden', 'true');
            this.setAttribute('aria-expanded', 'false');
        }
    });
}

document.addEventListener('keydown', (event) => {
    if (event.isComposing || event.keyCode === 229) {
        return;
    }
    if (event.keyCode === 27) {
        for (let i = 0; i <= 1; i++) {
            if (!navList[i].hasAttribute('hidden')) {
                navToggle[i].setAttribute('aria-expanded', 'false');
                navList[i].setAttribute('hidden', 'true');
            }
        }
    }
});

Ich war nur von dem Beispiel insofern irritiert, als es mit dem hidden eine andere Methode verwendet und das Beispiel offenbar von einem mobile-first-Ansatz ausgeht, ohne dann aber ein entspr. MQ zu ergänzen.

Ich weiß nicht, ob es überhaupt ginge, aber wenn es sauber getrennt mit zwei JS-Codes (einer für jede Nav) einfacher und überschaubarer wird für mich, dann wäre es mir im Zweifelsfall recht.

- const definiert offenbar bestimmte Variablen, mit denen dann die folgende Funktion irgendwas macht.

Warum braucht James auch noch die ul-Links, zumal "navLinks" im JS dann auch gar nicht mehr auftaucht?

        // Set focus on first link
        // will be highlighted for keyboard users
        navLinks[0].focus();

- Macht das James-Beispiel nur Sinn, wenn wir das hidden-Attribut im ul übernehmen oder können wir das so machen, wie ich es im Eröffnungspost als derzeitiger Status quo bei mir gemacht habe (default ist im CSS Button ausgeblendet, im MQ wird dann Button ein- und das ul ausgeblendet)?

Wenn ich den Code einfach nur in meine JS-Datei kopiere, wird übrigend keycode als deprecated durchgestrichen.

Neben "ESC" gibt es noch zwei weitere Close-Fälle, kann das sein?

Ich tu mich ehrlich gesagt mit dem James-Bsp. schwer. Es scheint nicht für mich gemacht zu sein.

Machen wir es doch so: Ich bastle mit den sehr ähnlichen Beispielen, die ich gefunden habe, erst mal den JS-Code für eine Nav ohne DD-Untermenü zusammen. Und stelle ihn dann hier rein.

Dann musst du nur drüberschauen und sagen, was falsch oder suboptimal ist und ich habe mich zumindest ein wenig mit JS auseinandergesetzt und eine vage Vorstellung davon, was welcher Teil macht.