zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Per Burger eingeblendetes Navi-Menü ausblenden: Beste Technik

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.03.2018, 14:11
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard Per Burger eingeblendetes Navi-Menü ausblenden: Beste Technik

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.
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.03.2018, 08:39
Benutzerbild von etux
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
  #3 (permalink)  
Alt 08.03.2018, 08:57
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@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?
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 08.03.2018, 09:39
Benutzerbild von etux
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
Dort hat so eine Überschrift keinen Nutzen.
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”.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Eine meiner einfachen Richtlinie ist das Ansehen einer Seite ganz ohne CSS.
... in dem Fall sogar um so mehr.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Kennst Du eventuell ein Beispiel, wo jemand mit Pseudoelement (um extra Markup zu vermeiden) und target (um JS zu vermeiden) gearbeitet hat?
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/
Mit Zitat antworten
  #5 (permalink)  
Alt 08.03.2018, 09:48
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@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
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 08.03.2018, 09:55
Benutzerbild von etux
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
Mir leuchtet noch nicht ein, warum Du eine Überschrift nützlich findest.
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/

Geändert von etux (08.03.2018 um 09:59 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.03.2018, 10:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.009
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.03.2018, 10:14
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@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.

HTML-Code:
<nav class="menu">
   <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
   <label class="menu-open-button" for="menu-open">
    <span class="lines line-1"></span>
    <span class="lines line-2"></span>
    <span class="lines line-3"></span>
  </label>

   <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
   <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
   <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
   <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
   <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
   <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>
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.
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 08.03.2018, 11:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.009
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.03.2018, 11:58
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@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.
__________________

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Navi: Eltern-Element verbreitert sich beim hover auf Kind-Element img CSS 0 07.12.2010 19:42
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 17:45
Vertikales Menü streikt im IE6 kopfaquarium CSS 1 16.10.2007 15:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:45 Uhr.