@@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. 😫 ```css,bad .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: ```css .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*{:@en}.) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@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. 😫 ```css,bad .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: ```css .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?) 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*{:@en}.) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix