Sponsored Links |
|
||||
Code:
a:target ~ ol Oder Du ergänzest es mit: Code:
a:target ~ nav ol 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> |
Sponsored Links |
|
||||
@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) |
|
||||||
Zitat:
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:
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:
Wenn schon als Zeichen, dann als Pseudoelementen per CSS und nicht im Quellcode. Zitat:
Das JavaScript vermeidet nur, dass es hin und her gesprungen (gescrollt) wird. Es sind ja auch bloß 4-5 Zeilen. Zitat:
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. So auf die Schnelle kann ich Dir das nicht sagen – zumal sich die Höhe bei mir nicht ändert. |
|
||||
@emil
Erstmal vielen Dank für Deine ausführliche Antwort Das ist natürlich immer richtig. Aber ich möchte das lieber aus erster Hand erfahren. Zitat:
Zitat:
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:
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.
__________________
|
|
||||
Zitat:
Zitat:
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:
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:
Aber wie gesagt, als Vorlage ist das ungeeignet. |
|
||||
Zitat:
Welchen Vorteil hat ein Screenreadernutzer, wenn er einen/beide Links vorgelesen bekommt? Ich erkenne keinen. Zitat:
Zitat:
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:
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.
__________________
|
|
||||
Zitat:
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.
__________________
|
Sponsored Links |
|
||||
Du machst doch genau das per CSS.
Zitat:
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:
https://search.google.com/structured...Ffzr%2Fburger2 https://validator.nu/?doc=http%3A%2F...howoutline=yes Zitat:
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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |