Hallo Gabriele,

ich lese seit Samstag mit und will jetzt versuchen, dir das Tutorial im Wiki schmackhaft zu machen:

• Navigation/Flyout-Menü
  • CSS-flyout3.html

Es erklärt, wie man eine Flyout-Navigation erstellt, die barrierefrei und benutzerfreundlich ist.

Dabei wird auch gezeigt, wie man heute ein Hamburger-Icon erzeugt:

• Toggle-Design:_Navicon

Das Tutorial ist vor 2 Jahren zum letzten Mal aktualisiert worden und öffnet die Links deshalb mit JavaScript. Das ist nicht falsch, wird in ein paar Jahren aber nicht mehr nötig sein.

Am Ende findest du eine Variante mit details/summary, die die Linkliste direkt unterhalb des Nav-Icons öffnet.

Popover und Anchor positioning werden da bald eine Alternative - die Positionierung geht derzeit aber noch nicht im Firefox.

1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
   Warum klappt dies nicht?

Die Frage ist eher, ob das benutzerfreundlich ist. Normalerweise will ich die Linkliste sofort sehen.

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Siehe die entsprechende Stelle im Tutorial.

Die ul befindet sich unterhalb des buttons, deshalb ist auch dort psoitioniert. Man könnte die ul oberhalb des Texts darstellen, dann wäre dieser aber im geöffneten Zustand verdeckt.

Herzliche Grüße
Matthias Scharwies