Umstellung auf responsive/Neukonzeption

[Rolf B]

Hallo JürgenB,

ich habe eine Zeit gebraucht, um diese Ankerei zu verstehen, und ich habe sie entweder noch nicht ganz verstanden oder eine Ankerpositionierung über bottom oder right funktioniert schlichtweg nicht.

Aber position-area ist superschick. Grob angeben, wo es hinsoll, und per Margin feintunen. Wichtig ist nur, dass die übrigen Margins 0 sind, sonst grätscht die Popoverei der Ankerei böse in die Wade.

  <button type="button" popovertarget="main-menu">Menü</button>
  <ul id="main-menu" popover>
  </ul>

#main-nav ul {
  position: absolute;
  position-area: bottom span-left;
  margin:0.2em 0 0 0;
}

Mehr braucht's tatsächlich nicht - durch das Popover wird die Ankerbeziehung zwischen ul und button automagisch hergestellt. In der Breitansicht setze ich position:static, womit der Anker automatisch gekappt wird.

Alles, was ich vorher im Script hatte: Fokussteuerung, Schließen mit Esc, Soft-Dismiss mit Klick außerhalb. Wow.

Was noch fehlt, ist das automatische Schließen nach Klick auf einen der Links im Popover-Menü. Nicht tragisch, es wird eh eine andere Seite geladen, aber wenn man darin Buttons hat, muss man nach Klick doch wieder manüll schließen.

Wenn Du die import()-Funktionsschreibweise nimmst, brauchst Du übrigens auch kein ECMAScript-Modul um den Polyfill zu laden, das geht überall.

Die Popover-Version ist hier: https://jsfiddle.net/5q4b82j0/

Rolf