Hallo einsiedler,

Mein Testentwurf gibt es hier: Misanthrop bei Bplaced

Allerdings ohne den Jump-Out Esel. Deswegen bin ich nicht sicher, ob Du damit das zeigst, was Du zeigen möchtest.

Darüber hinaus hat das Beispiel JavaScript-Fehler und -Unnötigkeiten.

• stylesheet.textContent = cssRules - cssRules ist undefiniert
• Warum willst Du überhaupt on-the-fly Styles erzeugen, was spricht gegen eine .css Datei die Du vom Server holst?
• menu.style.display = isExpanded ... - menu ist undefiniert. Das sieht nach einem Relikt aus, denn im Stylesheet sieht man, dass Du das mittlerweile mit reinem CSS machst, so wie es sich auch gehört.
• den DOMContentLoaded-Handler kannst Du Dir sparen, wenn Du dem Script-Element das defer-Attribut gibst. defer-Scripte werden unmittelbar vor Auslösen des DOMContentLoaded Events ausgeführt.

<script defer>
   // JS, das erst läuft, wenn das DOM fertig erstellt ist.
</script>

Zu deinem eigentlichen Problem: Ich denke mir, die Funktion flyoutExtension sollte einen Parameter bekommen: toggleID. Den verwendest Du in der Funktion zur Identifikation des Toggles.

function flyoutExtension(toggleID) {
   const toggle = document.querySelector("#" + toggleID);
   ...Rest unverändert, bis auf die beiden isExpanded-Zeilen, die können weg
}

flyoutExtension("menu-toggle");
flyoutExtension("titel-toggle");

Dein aktuelles id="toggle" Element habe ich in menu-toggle umgetauft, und den Esel von icon-toggle in titel-toggle. Kannst Du machen oder lassen.

Sodann musst Du Dir den CSS genau anschauen und Eigenschaft für Eigenschaft überlegen: Was ist für beide Flyouts gemeinsam gültig, und was ist spezifisch für eins von den beiden. Wie man etwas auf nur eins der beiden Flyouts begrenzt, weißt Du eigentlich schon, du machst es bereits: #main-nav [aria-expanded]~ul gilt nur für' Menü. Der Selektor #icon-nav [aria-expanded]~span würde nur für die Titelanimation gelten; allerdings ist da auch falsches HTML drin. Ein span darf nur phrasing-content (Text und seine Auszeichnungen) enthalten, ein h1 ist aber eine Stufe höher: flow-content. Das span muss ein div sein. Ich würde aber behaupten: schmeiß das span ganz weg und mach das a in das h1 statt andersrum, der Selektor ändert sich dann natürlich in #icon-nav [aria-expanded]~h1

Die Farbe Orange würde ich der main-nav Liste übrigens immer geben, nicht nur im expanded=true Zustand. Ich finde, es sieht besser aus, wenn sie beim Einfahren orange bleibt.

Rolf