SLIDE-Menü verlässt kurzzeitig sein Gridelement

[Gunnar Bittersmann]

@@einsiedler

Mein "einsliderndes Menü" verlässt kurzzeitig sein Gridelement (nen kleines stück nach rechts) bevor das Menü schließlich nach links einfährt

Zunächst muss man erstmal dahin kommen, dass das Menü einfährt. Ich lande auf deiner Seite, drücke [Tab] und die Seite springt erstmal nach unten zum „Top“-Link. WTF‽ Der „Top“-Link sollte wohl ganz am Ende im DOM stehen.

Nochmal [Tab] gedrückt und die Seite springt wieder nach oben. Es ist nicht zu erkennen, welches Element gerade den Fokus hat:

Nochmal [Tab] gedrückt und die Fokusmarkierung liegt sowohl um „Inhalts-Übersicht“^[1] als auch um das Hamburger-Icon:

Ähm, wie öffnet man nun das Menü?

Spoiler: Das Hamburger-Icon hat den Fokus, wenn der blaue Strich daneben ist. Du solltest dafür sorgen, dass der blaue Rahmen um das Hamburger-Icon angezeigt wird.

Wenn „Inhalts-Übersicht“ den Fokus hat, sollte der blaue Rahmen nur darum sein, nicht das Hamburger-Icon mit einschließen.

Das Problem mit der Animation ist dein geringstes. Du solltest erst die anderen lösen, weil sich dabei vermutlich das Markup ändert.

Wo wir bei Markup sind:

<details>
  <summary>
    <div>
      <nav>…</nav>
      <nav>…</nav>
    </div>
  </summary>
</details>

Das sieht mir nach missbräuchlicher Verwendung des details-Elements aus, wenn schon alles in der summary steht.

Und warum zwei nav-Elemente? Das sollte wohl alles in einem stehen.

Jolan tru

---

1. Warum nicht „Inhaltsübersicht“ zusammengeschrieben? ↩︎