Zitat:
Zitat von AndreasB
Typischerweise bietet ein per Burger eingeblendetes Navi-Menü ein "X" als klickbare Fläche zum wieder ausblenden des Navi-Menüs.
Gibt es eine bessere Technik, die ohne zusätzliches Markup (und ohne JS sowieso) auskommt?
|
Besser, weiß ich nicht, aber aus meiner Sicht deutlich semantischer.
Eine Seiten-Navigation kann als (un)geordnete Liste in einem nav-Element stehen.
Das nav-Element muss nicht (wie beispielsweise bei einem section-Element) aber
kann eine Überschrift beinhalten.
Diese Überschrift kann einen sinnvollen Text haben, wie:
„Die Seitennavigation zeigen, verstecken.“
Wenn man „zeigen“ und „verstecken“ in Sprung-Links einbaut, hat man jetzt zwei Buttons, um eben die Navigation zu zeigen oder zu verstecken.
Man kann auch alle übrigen Zeichen aus dem Satz in spans verpacken: Einmal den Teil „„Die Seitennavigation“, dann das Komma und anschließend den Punkt am Ende des Satzes.
Plus die zwei Sprunglinks, hat man jetzt insgesamt fünf Elementen – es dürfte jetzt kein Problem sein, Burger und Kreuz (X) nach zu bauen und sogar zu animieren.
HTML-Code:
<nav>
<h2>
<span>Menü</span>
<a>öffnen</a>
<span>,</span>
<a>schliessen</a>
<span>.</span>
</h2>
<ul>
<li>...</li>
</ul>
</nav>
Man könnte auch mit Pseudoelementen arbeiten, aber es ist in diesem Fall überflüssig – es sind ja genug Elemente da.
Es ist ganz wenig JavaScript notwendig.
Sollte im Browser die JavaScript-Unterstützung ausgeschaltet sein, kann man die Funktionalität des Menüs mit Hilfe der Pseudoklasse „::target“ umsetzen.
Als Sprungziele dienen dann die Liste (ul) und die Navigation (nav)
.