Mobiles Menü ausblenden nach klick

[KC]

Hallo Leute,

geht um das Menü in der mobilen Ansicht auf z. B. Smartphone. Wenn man einen Menüpunkt anklickt, möchte ich das das Menü sich wieder schließt. Habt ihr einen Tip wie das zu lösen ist?

Gruß

[Gunnar Bittersmann]

@@KC

geht um das Menü in der mobilen Ansicht auf z. B. Smartphone. Wenn man einen Menüpunkt anklickt, möchte ich das das Menü sich wieder schließt. Habt ihr einen Tip wie das zu lösen ist?

Ich hatte schon Schwierigkeiten, das Menü überhaupt zu öffnen. Wo soll da ein Menü sein? Genau hingesehen: keins da. Genauer hingesehen: immer noch keins. Ganz hingesehen: hab’s gefunden! Aber auch nur, weil sich gerade eine Wolke vor die Sonne geschoben hat. Dunkelgrün auf schwarz, tolle Idee. Nicht.

Einmal gefunden, ist die Schwierigkeit, den Button (hurra, es ist ein <button>!) anzusteuern: Tab-Taste gedrückt, nochmal … und man sieht nicht, wo man sich befindet. 😫

.navbar-toggle:focus {
  outline: 0;
}

im Bootstrap-Stylesheet ist großer Unsinn! Das musst du überschreiben, also sowas in der Art in dein Stylesheet tun:

.navbar-toggle:focus {
  outline: revert;
}

Da aktuelle Browser bei Mausbedienung keine Fokusmarkierung mehr anzeigen, besteht kein Anlass, denn :focus-Effekt wegzumachen. Buh, Bootstrap! (Oder hast du da eine veraltete Version?)

(Statt den Browserdefault wiederherzustellen kannst du natürlich auch die Fokusmarkierung selbst gestalten – Hauptsache deutlich sichtbar!)

Beim Öffnen/Schließen des Menüs wird das aria-expanded-Attribut umgeschaltet; was völlig richtig ist. Außerdem wird ein aria-expanded-Attribut am div#navbar umgeschaltet, was völliger Quatsch ist. Dort gehört kein aria-expanded-Attribut ran.

---

Zum Schließen des Menüs beim Clicken eines Links musst du halt zusätzlich auch noch die Funktion aufrufen, die beim Clicken des Hamburger-Buttons aufgerufen wird.

Und wo du schon dabei bist: Beim Drücken der Escape-Taste sollte das Menü auch schließen, also ebenfalls die Funktion aufgerufen werden.

Und wenn man per Tab-Taste das Menü verlässt, muss es sich auch schließen. (Oder man muss dafür sorgen, dass man das Menü per Tab-Taste gar nicht verlassen kann: focus trap.)

🖖 Живіть довго і процвітайте

[KC]

Danke für so viel Ausfuhrlichkeit. Probiere ich aus