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
  #21 (permalink)  
Alt 10.03.2018, 15:53
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

So, mein Burgermenü ist fertig. Es ist jetzt so schlank, wie es mir vorschwebt. Etwas Vergleichbares hatte ich bisher nirgendwo gefunden.

Und vom Markup bevorzuge ich die zwei Links gegenüber dem "Checkbox Hack".

Vielleicht gefällt's euch auch.

HTML-Code:
a[href="#show-nav"], 
a[href="#hide-nav"] {
	display: none;
}
@media screen and (max-width: 40em) {
a[href="#show-nav"], 
a[href="#hide-nav"] {
	padding: 0.5em;
	background: gray;
	color: white;
	text-decoration: none;
}
a[href="#show-nav"],
a:target ~ ol,
a:target ~ a[href="#hide-nav"] {
	display: block;
}
nav ol,
a[href="#hide-nav"],
a[href="#show-nav"]:target {
	display: none;
}
HTML-Code:
<!-- Begin: Extra Markup -->
<a href="#show-nav" aria-hidden="true" id="show-nav"></a>
<a href="#hide-nav" aria-hidden="true"></a>
<!-- End: Extra Markup -->
<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/zimmer">Zimmer</a></li>
		<li><a href="/seminarbereich">Seminarbereich</a></li>
		<li><a href="/galerie">Galerie</a></li>
		<li><a href="/anfrage">Anfrage</a></li>
		<li aria-current="page"><strong>Lage</strong></li>
		<li><a href="/service">Service</a></li>
	</ol>
</nav>
__________________


Geändert von AndreasB (10.03.2018 um 19:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 10.03.2018, 18:36
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

Code:
a:target ~ ol
Das wird funktionieren, wenn die beide leere Links am Anfang vom nav-Element stehen.
Oder Du ergänzest es mit:
Code:
a:target ~ nav ol
Die input-Variante war schon valide, aber dennoch nicht ganz korrekt. Denn ein input-Element gehört in einem form-Element.
Ob es auch semantisch ist? Wenn es die halbe Welt so einsetzt, wird es bestimmt irgendwann.

Die leere Links - wenn ich Dich richtig verstehe, hast Du was gegen Inhalt, aber nicht gegen leeren Elementen.

Ich selbst gehe äußerst sparsam mit dem Quellcode um – nur das, was unbedingt nötig. Und der Quellcode (die html-Elementen) muss "verraten", oder zumindest andeuten, was für Inhalt zu erwarten wäre.

Daher habe ich mich schon vor Jahren für die Variante mit der Überschrift entschieden. Hier ist eine abgespeckte Variante davon. Im Original steuere ich die Effekten mit JavaScript. Nur wenn im Browser die JavaScript-Unterstützung ausgeschaltet ist, wirkt die „:target“ Regel:
HTML-Code:
<!doctype html>
<meta charset="utf-8">
<title>Per Burger eingeblendetes Navi-Menü ausblenden: Beste Technik :: xhtmlforum.de</title>
<style>
    * { margin: 0; padding: 0; font-size: 100%; list-style-type: none; outline: none; }
    html { overflow-y: scroll; }
    nav { padding: .4em 3%; box-shadow: 0 .2em .3em #dfdfdf; background-color: #eee; }
    nav li:first-child { padding-top: 2em; }
    /* nav-main-title */
    #nav-main-title { position: relative; width: 2.4em; height: 1.8em; font-size: 100%; text-indent: -999em; }
    #nav-main-title span { position: absolute; display: block; width: 100%; height: 20%; border-radius: .1em; background-color: #666; }
    #nav-main-title .str-top { top: 0; }
    #nav-main-title .str-middle { top: 40%; }
    #nav-main-title .str-bottom { bottom: 0; }
    #nav-main-title a { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; }
    #nav-main-title span { transition: all .3s ease-in-out; }
    #nav-main:target #nav-main-title .str-top { transform: translateY(200%) rotate(45deg); }
    #nav-main:target #nav-main-title .str-middle { background-color: transparent }
    #nav-main:target #nav-main-title .str-bottom { transform: translateY(-200%) rotate(-45deg); }
    #nav-main-title a { z-index: 1; }
    #nav-main-title a,
    #nav-main:target a.menu-pages-open,
    #nav-main-title:target a.menu-pages-close { display: none; }
    #nav-main-title a.menu-pages-open,
    #nav-main:target a.menu-pages-close,
    #nav-main-title:target a.menu-pages-open { display: block; }
    /* menu-pages */
    #menu-pages {	max-height: 0; overflow: hidden; transition: max-height .5s; }
    #nav-main:target #menu-pages { max-height: 10em; }
</style>
<nav id="nav-main" class="nav-main" aria-labelledby="nav-main-title">
    <h2 id="nav-main-title">
        <span class="str-top">Menü</span>
        <a class="menu-pages-open" href="#nav-main" title="Menü öffnen">öffnen</a>
        <span class="str-middle">,</span>
        <a class="menu-pages-close" href="#main-nav-title" title="Menü schliessen">schliessen</a>
        <span class="str-bottom">.</span>
    </h2>
    <ul id="menu-pages" role="menu">
        <li role="menuitem">Hier kommt</li>
        <li role="menuitem">die Menü-Liste</li>
        <li role="menuitem">...</li>
    </ul>
</nav>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 10.03.2018, 19:03
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@Emil

Danke für Dein interessantes Beispiel


Zu Überschriften für Nav-Gruppen:

Ich habe mir noch keine abschließende Meinung dazu gebildet.

Gerne würde ich z.B. mal von einem Blinden wissen, ob er solche Überschriften für nützlich oder für "geschwätzig" hält.
Und ob sein Screenreader im im Alltag wirklich Aria-Label vorliest, auf seinem Desktoprechner bzw. auf seinem Mobilgerät.

Ist es eine bewußte Entscheidung von Dir, dass Du für Screenreader die Burgermenüfunktion nicht via aria-hidden="true" verbirgst?

Zur Validität:
Erstaunlicherweise darf ein Input nackt im Quellext stehen.
https://validator.w3.org/nu/?doc=htt...2Ffzr%2Fburger

Wußte ich bis vorgestern auch nicht.

Zum leeren Element:
Das habe ich bereits korrigiert.

Die Zeichen stehen jetzt natürlich im A-Element direkt.

Zu Deiner JS-Lösung:
Welchen Vorteil hat Sie für Dich gegenüber der :target Lösung?Geht es da um den störenden Fragmentidentifikator im URL?
Kannst Du vielleicht einen Link nennen, wo man sich Deine Lösung mal live und in Farbe anschauen kann?

Zur Änderung der Höhe des Elementes mit dem Burger-"Icon" in meinen beiden Beispiel im Browser Chrome:

Hast Du eine Idee, warum sie sich ändert?

Burger 2
Burger
__________________


Geändert von AndreasB (10.03.2018 um 20:04 Uhr)
Mit Zitat antworten
  #24 (permalink)  
Alt 11.03.2018, 09:03
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
Zu Ãœberschriften für Nav-Gruppen:

Ich habe mir noch keine abschließende Meinung dazu gebildet.

Gerne würde ich z.B. mal von einem Blinden wissen, ob er solche Ãœberschriften für nützlich oder für "geschwätzig" hält.
Und ob sein Screenreader im im Alltag wirklich Aria-Label vorliest, auf seinem Desktoprechner bzw. auf seinem Mobilgerät.
Das kannst Du auch selbst raus finden. Zum Thema gibt es viel Lesestoff.
Du kannst auch selbst ein Screen Reader benutzen. Auch als Emulator:

Fangs – the screen reader emulator – Standards Schmandards
https://webaim.org/simulations/screenreader

Test-Tools geben auch eine grobe Vorstellung. Wie z.B.:
WAVE Web Accessibility Tool

Zitat:
Zitat von AndreasB Beitrag anzeigen
Ist es eine bewußte Entscheidung von Dir, dass Du für Screenreader die Burgermenüfunktion nicht via aria-hidden="true" verbirgst?
Warum sollte ich es verbergen. Im schlimmsten Fall sind es Sprunglinks.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Zur Validität:
Erstaunlicherweise darf ein Input nackt im Quellext stehen.
https://validator.w3.org/nu/?doc=htt...2Ffzr%2Fburger

Wußte ich bis vorgestern auch nicht.
Wie gesagt, valide ist es. Mich wundert es aber auch, dass wegen des fehlendes form-Element keine Warnung ausgegeben wird.

Hier auch nicht, aber mit Structural outline:
https://validator.nu/?doc=http%3A%2F...howoutline=yes

Die Daten-Stukturierung kann man auch hier prüfen lassen:
https://search.google.com/structured-data/testing-tool

Zitat:
Zitat von AndreasB Beitrag anzeigen
Zum leeren Element:
Das habe ich bereits korrigiert.

Die Zeichen stehen jetzt natürlich im A-Element direkt.
Wem sollen diese nichtssagende Zeichen was nutzen? Je nach Browser(-Einstellungen) sieht man sogar bloß Rechtecke in denen entweder "2630" oder "2715" steht.
Wenn schon als Zeichen, dann als Pseudoelementen per CSS und nicht im Quellcode.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Zu Deiner JS-Lösung:
Welchen Vorteil hat Sie für Dich gegenüber der :target Lösung?Geht es da um den störenden Fragmentidentifikator im URL?
Es sind Sprunglinks, die ihre Sprungziele haben. Und nicht wie in Deinem Beispiel auf sich selbst zeigen.
Das JavaScript vermeidet nur, dass es hin und her gesprungen (gescrollt) wird. Es sind ja auch bloß 4-5 Zeilen.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Kannst Du vielleicht einen Link nennen, wo man sich Deine Lösung mal live und in Farbe anschauen kann?
In meiner Signatur ist Link zu meiner Site. Da kannst Du sie im Einsatz sehen.
Als Vorlage ist es aber nicht unbedingt geeignet. Nach dem Provider-Wächsel habe ich "vorübergehend" eine Wordpress-Installation eher als Platzhalter aufgesetzt. Eine mit Deppenlinks.
Sie wird irgendwann wieder mit einer TYPO3-Installation ersetzt. Zumal der ISP auf TYPO3 spezialisiert und an der Entwicklung von TYPO3 intensiv beteiligt ist. Dacher auch mein ISP Wächsel.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Zur Ãnderung der Höhe des Elementes mit dem Burger-"Icon" in meinen beiden Beispiel im Browser Chrome:
Hast Du eine Idee, warum sie sich ändert?

Burger 2
Burger
So auf die Schnelle kann ich Dir das nicht sagen – zumal sich die Höhe bei mir nicht ändert.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #25 (permalink)  
Alt 11.03.2018, 09:20
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@emil
Erstmal vielen Dank für Deine ausführliche Antwort

Zitat:
Zitat von etux Beitrag anzeigen
Das kannst Du auch selbst raus finden. Zum Thema gibt es viel Lesestoff.
Das ist natürlich immer richtig. Aber ich möchte das lieber aus erster Hand erfahren.

Zitat:
Warum sollte ich es verbergen.
Weil sie keinen Nutzen für Blinde haben und weil es "aria-hidden" ja gibt.



Zitat:
Wem sollen diese nichtssagende Zeichen was nutzen? Je nach Browser(-Einstellungen) sieht man sogar bloß Rechtecke in denen entweder "2630" oder "2715" steht.
Wenn schon als Zeichen, dann als Pseudoelementen per CSS und nicht im Quellcode.
Hhmm.
Verstehe ich Dich richtig, dass Du in das Markup einen normalen Linktext schreiben würdest und zusätzlich die Zeichen als Pseudoelement per CSS?

Bei welchen Browsereinstellungen sieht man bitte nur Rechtecke?


Zitat:
Das JavaScript vermeidet nur, dass es hin und her gesprungen (gescrollt) wird. Es sind ja auch bloß 4-5 Zeilen.
Falls Du Lust hast und Du es aus dem Ärmel schüttelst, würde ich mich freuen, wenn Du Dein JS hier so postest, dass man es auf mein Beispiel anwenden kann.
Mir gefällt Dein Konzept nämlich, dass die Target-Lösung nur als Fallback verwendet wird.
Ich finde gut, wenn es in der Adressleiste keine Änderung gibt.
__________________

Mit Zitat antworten
  #26 (permalink)  
Alt 11.03.2018, 11: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
Das ist natürlich immer richtig. Aber ich möchte das lieber aus erster Hand erfahren.
Gut, aber bis sich einer bei Dir meldet, kannst Du das Thema studieren und einen Screen Reader simulieren. Der zeigt Dir ja was vorgelesen wird.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Weil sie keinen Nutzen für Blinde haben und weil es "aria-hidden" ja gibt.
Wenn ich die Links verstecken würde, was ich nicht tue, würde ich sie aber abwechselnd verstecken und nicht gleichzeitig. Für den klickbaren (sichtbaren) Link wird der Wert "true" dann per JavaScript auf "false" gesetzt
Aber:
https://w3c.github.io/using-aria/#fourth

aria-hidden würde ich eher bei den geordneten Listen (ol) verwenden.

Übrigens: Dein aria-hidden validiert nicht, weil Du die falsche Einführungszeichen benutzest.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Verstehe ich Dich richtig, dass Du in das Markup einen normalen Linktext schreiben würdest und zusätzlich die Zeichen als Pseudoelement per CSS?
Ja.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Bei welchen Browsereinstellungen sieht man bitte nur Rechtecke?
Dürften recht wenig sein. Vorallem die auf Sicherheit getriemten Browser. Bei mir nur zwei: Icecat, eine GNU Version von Firefox, den es nur unter Fedora gibt (glaube ich, oder zumindest nur unter Linux) und der Top-Browser.
https://www.torproject.org/

Zitat:
Zitat von AndreasB Beitrag anzeigen
Falls Du Lust hast und Du es aus dem Ärmel schüttelst, würde ich mich freuen, wenn Du Dein JS hier so postest, dass man es auf mein Beispiel anwenden kann.
Mir gefällt Dein Konzept nämlich, dass die Target-Lösung nur als Fallback verwendet wird.
Ich finde gut, wenn es in der Adressleiste keine Änderung gibt.
Die paar Zeilen (die erste 6 Zeilen im Script) kannst Du Dir sicher auch selbst anpassen.
Aber wie gesagt, als Vorlage ist das ungeeignet.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #27 (permalink)  
Alt 11.03.2018, 20:58
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Notfals kann ich auch eins schreiben.
Brauche nur eine Info.
Was soll das Script den genau machen?Habe bei den ausführlichen Gespräch den durchblick verloren.
Mit Zitat antworten
  #28 (permalink)  
Alt 11.03.2018, 21:42
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von etux Beitrag anzeigen
Wenn ich die Links verstecken würde, was ich nicht tue, würde ich sie aber abwechselnd verstecken und nicht gleichzeitig.
Warum möchtest Du sie abwechseln vor einem Screenreader verstecken?
Welchen Vorteil hat ein Screenreadernutzer, wenn er einen/beide Links vorgelesen bekommt?
Ich erkenne keinen.
Zitat:
Übrigens: Dein aria-hidden validiert nicht, weil Du die falsche Einführungszeichen benutzest.
Oh, Danke. Ist korrigiert.
Zitat:
Dürften recht wenig sein. Vorallem die auf Sicherheit getriemten Browser. Bei mir nur zwei: Icecat, eine GNU Version von Firefox, den es nur unter Fedora gibt.
Das werte ich als nicht relevant genug um Sonderlösungen zu rechtfertigen.
Werden denn die von Dir genannten Browser überhaupt auf Geräten mit sehr schmalen Displays verwendet? Denn ansonsten greift die CSS-Regel ja eh nicht.
Zitat:
Die paar Zeilen (die erste 6 Zeilen im Script) kannst Du Dir sicher auch selbst anpassen.
Aber wie gesagt, als Vorlage ist das ungeeignet.
Ich wollte Dich ja weder überreden oder gar belästigen.
Hätte ja sein können, dass Du Lust hast die von mir angedachte Lösung via target per JS zu vervollständigen.
Ich selber beherrsche kein JS.
__________________

Mit Zitat antworten
  #29 (permalink)  
Alt 11.03.2018, 21:53
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von basti1012 Beitrag anzeigen
Notfals kann ich auch eins schreiben.
Brauche nur eine Info.
Was soll das Script den genau machen?
Ich möchte Dich auf keinen Fall belästigen, Basti. Es ist mir wichtig, dass dies klar ist

Wenn Du die Idee schön findest, zu einer schlanken generischen Lösung beizutragen, dann freue ich mich über Dein Skript.

Vielleicht können das dann andere Leser ebenfalls gerne verwenden.

Die Aufgabe ist einfach skizziert.

Grundlage ist:
Burger 2

Das JS soll bei diesem Code (den beiden A-Elementen) die Funktionalität bereitstellen und wenn im Browser kein JS bereitsteht, soll alles so funktionieren wie im genannten Link, also einfach nur per CSS.

Die JS-Lösung soll keine Veränderung in der Adressleiste bewirken.
__________________

Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 12.03.2018, 07:18
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
Warum möchtest Du sie abwechseln vor einem Screenreader verstecken?
Du machst doch genau das per CSS.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Welchen Vorteil hat ein Screenreadernutzer, wenn er einen/beide Links vorgelesen bekommt?
Ich erkenne keinen.
Noch mal: Deine Sprunglinks zeigen entweder auf sich selbst (#show-nav) oder ins Nirvana (#hide-nav). !?!
Mene Sprunglinks haben auch Sprungziele. Es würde, wenn überhaupt, Sinn machen, den Link dessen Ziel gerade erreich wurde zu verstecken.

Nur zur Info: Mitlerweile ist das anders, aber früher haben Screen Reader Elementen nicht "gesehen", die per "display: none;" ausgeblendet wurden.

Und noch mal:
Zitat:
Zitat von etux Beitrag anzeigen
Zitat:
Zitat von etux Beitrag anzeigen
Oh, Danke. Ist korrigiert.
Sehr gut. Jetzt ist es vielleicht schwieriger zu übersehen, dass eine Struktur fehlt. Was allerdings kein Fehler ist, aber schön ist es auch nicht.
https://search.google.com/structured...Ffzr%2Fburger2
https://validator.nu/?doc=http%3A%2F...howoutline=yes

Zitat:
Zitat von AndreasB Beitrag anzeigen
Hätte ja sein können, dass Du Lust hast die von mir angedachte Lösung via target per JS zu vervollständigen.
Richtig, aber ich habe leider nicht die Zeit dazu.
Außedem bin ich mit Deinem html-Code nicht einverstanden.
Und jetzt bitte nicht gleich fragen: Warum? Es stehen so einige Grüne in meinen Beiträgen.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
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 18:06 Uhr.