Hallo einsiedler,

Wie gesagt, dient diese CSS-Zeile eben NUR dazu, das beim TABBEN der .flyout-content NICHT mitgetabbt wird. Beim schließen des Menüs aber wird .flyout-content sofort unsichtbar.

In folgender CSS-Zeile soll die Klasse .content-visible Wozu dienen?

Genau aus dem Grund, dass das Menü beim Schließen sofort unsichtbar wird, und dadurch das Fly-In nicht so schön aussieht, hatte ich diese Klasse eingebaut. Aber ich habe Dir die zugehörige JavaScript-Änderung nicht verraten. Sorry.

In meiner Script-Version setze ich beim Klich auf den Button die content-visible Klasse. Die zwingt das Menü in die Sichtbarkeit, auch wenn aria-expanded schon auf false steht. In meinem Script ist ein Eventhandler auf transitionend. Der wird ausgelöst, wenn das fly-in beendet ist, und entfernt content-visible dann, damit das Tab-Verbot wieder greift.

Hilft dies bei meinem Problem wenn im JS diese Klasse gesetzt wird?

Durch die Klasse fährt das Menü im sichtbaren Zustand ein.

Du hast noch ein anderes Problem, das Gunnar und ich übersehen haben: die „Variable“ menu. Die deklarierst Du nicht und die initialisierst Du nicht, aber der Herrgott Browser nähret sie doch. Das ist nämlich die ID des Flyout-Menüs, und aus uralten Kompatibilitätsgründen ist jedes Element unter seiner ID im Window-Objekt zu finden. In menu steht immer der flyout-content der global-navigation. D.h. hier hast Du eine vergessene Überschneidung von Esel und Menü, und die hast Du versucht, mit display: block !important; für die Flyout-Box zu bekämpfen. Woraufhin das hidden-Attribut sind traurig in die Ecke verzieht, weil sich keiner mehr dafür interessiert.

Das menu fasst Du auch nur deshalb an, weil Gunnar Dir das "hidden" eingeredet hat. Das beißt sich jetzt aber mit der visibility-Steuerung im CSS. Aber weil ich jetzt arbeiten muss, kann ich nicht daran weitermachen.

Rolf