Beste Praxis für "Navigationsmenü anzeigen/verbergen" (Burger)

AndreasB · #1 (**permalink**) 05.05.2019, 08:50

Moin.

Ist der folgende HTML-Code ein vernünftiger Ansatz?

Bisher hatte ich für die Bereitstellung der Funktion "Navigationsmenü anzeigen/verbergen" das Element a verwendet.

Aber es handelt sich ja um eine Interaktion auf der aktiven Seite.

Mir erscheint daher button geeigneter.

Wie seht ihr das?

Ohne JS:

HTML-Code:

<nav id="navigationsmenue" aria-label="Navigationsmenü">
   <ol>
     <li><a href="https://xhtmlforum.de/...">...</a></li>
     ...
   </ol>
</nav>

Mit JS, Anfangszustand:

HTML-Code:

<nav id="navigationsmenue" aria-label="Navigationsmenü">
   <button aria-hidden="true">
     <img src="navigationsmenue-zeigen.svg" alt="Navigationsmenü zeigen"/>
   </button>
   <ol>
     <li><a href="https://xhtmlforum.de/...">...</a></li>
     ...
   </ol>
</nav>

Mit JS, nach dem Klick auf "Navigationsmenü anzeigen":

HTML-Code:

<nav id="navigationsmenue" aria-label="Navigationsmenü">
   <button aria-hidden="true">
     <img src="navigationsmenue-verbergen.svg" alt="Navigationsmenü verbergen"/>
   </button>
   <ol>
     <li><a href="https://xhtmlforum.de/...">...</a></li>
     ...
   </ol>
</nav>

Ein passendes JS muss ich mir noch suchen.
Falls jemand eine Seite kennt, wo etwas Ähnliches realisiert ist, freue ich mich über einen Hinweis.

inta · #2 (**permalink**) 05.05.2019, 21:56

Ich habe mich letzte Woche exakt in dieser Frage für das a-Element entschieden, aber jetzt wo ich das hier lese eigentlich nur aus alter Gewohnheit. Ich finde den Ansatz mit einem Button auf jeden Fall nachvollziehbar und gut. Den einzigen Vorteil den ich beim Link sehe ist, dass man die Navigation auch mittels target-Pseudoklasse schalten könnte, beim Button brauchst du Javascript.

PS: Ich halte ol für eine Navigation falsch, die Reihenfolge sollte dort keine Rolle spielen.

andir · #3 (**permalink**) 19.05.2020, 11:21

Da ich beginne, mich wieder etwas mit HTML/CSS -Authoring zu beschäftigen und Hamburger-Menüs derzeit so verbreitet (und praktisch) sind dass quasi jeder sie erkennt (auch wichtig ...)

zwei Anmerkungen:

position fixed / sticky und fallback per js (Gründe dort)

https://www.mediaevent.de/javascript...on-sticky.html

Links oder Buttons und Aria

https://www.barrierefreies-webdesign...nu-button.html

Die Idee mit dem Button ist daher gut.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Per Burger eingeblendetes Navi-Menü ausblenden: Beste Technik	AndreasB	CSS	33	24.03.2018 12:09