Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 08.03.2018, 08:39
Benutzerbild von etux
etux etux ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
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)


.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links