Nachdenken zur Lösung eines SIDENAV
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Bei der heutigen GUI-Herausforderung schaffen wir mit CSS und JavaScript eine responsive, barrierefreie Seitennavigation, die ausblendbar ist. Die seitliche Navigationsleiste funktioniert für verschiedene Browser, Bildschirmgrößen und Eingabegeräte. Super, oder? Wir nutzen Raster, Transformationen, Pseudoklassen und eine ganze Menge JavaScript, um diese UX zu handhaben.
@AdamArgyleInk wird in den ersten 30 Minuten nach Veröffentlichung der Folge auf deine Kommentare reagieren. Hier können Sie Kontakt mit uns aufnehmen, Fragen stellen oder Ihren eigenen Code einreichen.
Kapitel:
- 0:00 – Einführung
- 0:30 – Übersicht über Debugging Corner-Funktionen
- 2:25 – Raster += Media Query-Stack-Layout
- 3:42 – Übergang zur barrierefreien Transformation
- 4:22 - :target Pseudoklasse
- 5:57 – Escape-Tasten-UX
- 6:16 – Fokus orchestrieren
- 6:49 – Screenreader-UX
- 7:56 – Outro und Call-to-Action
Ressourcen:
Weitere GUI-Herausforderungen ansehen → https://goo.gle/GUIchallenges
Abonnieren Sie die Google Chrome-Entwickler → http://goo.gl/LLLNvf
arrow_back Zurück zu allen Folgen
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2021-01-21 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Benötigte Informationen nicht gefunden"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Zu umständlich/zu viele Schritte"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Nicht mehr aktuell"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problem mit der Übersetzung"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problem mit Beispielen/Code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Sonstiges"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Leicht verständlich"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Mein Problem wurde gelöst"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Sonstiges"
}]
{"lastModified": "Zuletzt aktualisiert: 2021-01-21\u00a0(UTC)."}
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2021-01-21 (UTC)."],[],[]]