Moin.

Typischerweise bietet ein per Burger eingeblendetes Navi-Menü ein "X" als klickbare Fläche zum wieder ausblenden des Navi-Menüs.

Gesehen habe ich jetzt einige Male, dass im HTML dafür das Element input verwendet wird.

Gibt es eine bessere Technik, die ohne zusätzliches Markup (und ohne JS sowieso) auskommt?

Welche Ausführung von Burgermenüs für schmale Displays findet ihr besonders gut gelungen?

Danke.

__________________

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.

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/

@Emil
Danke für Deine Antwort.

Ich möchte ungern im Quelltext eine Überschrift wie "Menü öffnen, schließen" verwenden.

Eine meiner einfachen Richtlinie ist das Ansehen einer Seite ganz ohne CSS.
Dort hat so eine Überschrift keinen Nutzen.

Kennst Du eventuell ein Beispiel, wo jemand mit Pseudoelement (um extra Markup zu vermeiden) und target (um JS zu vermeiden) gearbeitet hat?

__________________

Und ob sie einen Nutzen hat – sie beschreibt doch die Liste (ul).
Sie kann auch die komplette Navi (nav) beschreiben – WAI-Aria Attribute „aria-labelledby”.

... in dem Fall sogar um so mehr.

Beispiele gibt es genug – muss Du nur kurz danach suchen.
Aber wenn „::target“ benutzt wird, braucht es Sprunglinks. Also ganz ohne zusätzliches Markup dürfte das schwierig sein.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

@Emil
Braucht eine Navi-Liste wirklich eine Überschrift? Die Liste steht doch bereits im Nav-Element. Das sollte doch genügen.

Mir leuchtet noch nicht ein, warum Du eine Überschrift nützlich findest.

OK, ich werde nach Burgerbeispielen suchen. Bisher hatte ich keines mit einer Umsetzung via Pseudoelement und target gefunden. Hätte ja sein können, dass Du eines aus dem Ärmel schüttelst

__________________

Wie ich schon sagte: es muss nicht, aber es kann.
Z.B.: "Hauptnavigation" oder "Liste ähnlicher Beiträge" oder "Andere Beiträge in der Kategorie" oder "Service Navigation", usw.



Edit:
Semantic navigation with the nav element | HTML5 Doctor

.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Acuh wenn dir wahrscheinlich keines davon passt, hier eine aktuelle Übersicht was so mit zeitgemäßem HTML/CSS/JS möglich ist.
https://freebiesupply.com/blog/css-menus/
"Colourful Flower Popup Menu" (recht weit unten) kommt zB ohne Javascript aus.

@cloned
Es stimmt, die Lösung "Colorful Flower" gefällt mir wegen ihres Markups nicht.
Da stimmt sozusagen gar nix.
Der Autor verwendet nicht einmal nth-of-child-Selektoren, sondern haut massenhaft class-Attribute raus.

Ist auch kein Problem, wenn ich hier mit meinem Wunsch nach minimalem Markup offenbar ziemlich allein bin.
Es wäre schön, wenn diejenigen, denen das völlig unwichtig ist, unsere verschiedenen Wünsche einfach stehen lassen könnten.
Ich möchte darüber jedenfalls nicht diskutieren. Das führt zu nichts.

__________________

Du sollst ja auch nicht das Menü 1:1 nachbauen, du sollst dir ja auch nur anschauen wie so etwas prinzipiell ohne JS funktioniert. Wie dein eigentliches "Menü" dann aufgebaut ist oder ob es in einer Liste oder wie hier nur aus einzelnen a-Tags besteht ist dann ja egal. Auch ist es irrelevant, ob du jetzt die Klassen einbaust oder lieber mit :nth-child Selektoren arbeitest.
Das war nicht dazu gedacht, dass du dir einfach den Code kopierst, aber du kannst dir ansehen, wie du das prinzipiell mit einem input Feld und dem ein- und ausblenden löst. Anpassen auf deine eigene Seite musst du es sowieso.

@cloned
Es ist klar, dass ich sowas anpassen muss.

Aber natürlich bevorzuge ich ein Beispiel, welches gutem Code möglichst nahe kommt. Dann kann ich mir nämlich ersparen nachzuschauen, ob für das erwähnte Beispiel das span oder i essentiell ist.

Vielleicht liest hier ja noch jemand mit, dem mal eine Lösung ohne JS und ohne Extra-Markup im HTML-Dokument untergekommen ist.
Ich lasse mich überraschen.

__________________