Navigation in details: summary neben Linkliste

[Robert B.]

Hallo zusammen,

ich habe aus dem Wiki die Idee eine zugängliche und responsive Navigation mit details zu realisieren. Der prinzipielle Code dafür ist:

<nav>
<details><summary>Navigation</summary>
<ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="…">Unterpunkt</a></li>
    <li><a href="…">Unterpunkt</a></li>
</ul>
</details>
</nav>

Auf schmalen Viewports lässt sich das direkt als „Hamburger-Menü“ umsetzen.

Für breite Viewports möchte ich gerne eine „Brotkrumen-Navigation“ haben, was bislang eine Hacks und magische Annahmen erfordert, die auf der verlinkten Seite zu sehen sind, aber mit Sicherheit noch eleganter möglich ist. Habt ihr Ideen?

Viele Grüße
Robert

[JürgenB]

Hallo Robert,

ich habe aus dem Wiki die Idee eine zugängliche und responsive Navigation mit details zu realisieren.

das habe ich vor einigen Jahren auch probiert: https://www.j-berkemeier.de/Energiekostenrechner.html. Da die Experten der Meinung waren, das man mit details/summary keine responsive Navigation bauen kann, wurde es wieder depubliziert. Ich habe jetzt mal einen Versuch unternommen, eine Navi mit popover zu bauen, aber da die Unterstützung der benötigten anchor-Technik noch recht mau ist, ist das ganze erst mal nur ein Experiment: https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor

Gruß
Jürgen

[Gunnar Bittersmann]

@@Robert B.

ich habe aus dem Wiki die Idee eine zugängliche und responsive Navigation mit details zu realisieren.

Ob man das machen sollte, steht auf meiner Liste von Fragen an Léonie Watson, wenn ich sie demnächst sehe.

Bis dahin habe ich ‚nein, sollte man nicht‘ im Kopf.

Jolan tru