Thinking on ways to solve a SIDENAV

26 382
9.3
Следующее
26.01.21 – 16 13821:42
Dithering - HTTP 203
Популярные
336 дней – 4 4130:53
color-mix() #shorts
Опубликовано 21 января 2021, 18:00
In today’s GUI challenge we create a responsive, accessible slide out side navigation user experience using CSS and JS. The sidenav works on multiple browsers, screen sizes and input devices. Rad right? Follow as we employ grid, transforms, pseudo classes and a dollop of JavaScript to handle this UX.

@AdamArgyleInk will be responding to your comments for the first 30 minutes after the episode releases. Connect with us here, ask questions or submit your own code!

Chapters:
0:00 - Introduction
0:30 - Debugging Corner Feature Overview
2:25 - Grid += Media Query Stack Layout
3:42 - Accessible Transform Transition
4:22 - :target Pseudo Class
5:57 - Escape Key UX
6:16 - Orchestrating Focus
6:49 - Screen Reader UX
7:56 - Outro & Call To Action

Resources:
Code along → goo.gle/3sQ8Xif
Read along → goo.gle/2Np83J9
Try a demo → goo.gle/3bVBFYT
See how others are building sidenavs (GUI Submissions) → goo.gle/36CAeuO

Watch more GUI Challenges → goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → goo.gl/LLLNvf

#GUIchallenges #CSS #ChromeDeveloper
Свежие видео
7 дней – 1 078 1921:00
Time to Get your Time Back ⏰
9 дней – 118 61514:24
Setup Wars - Episode 353
13 дней – 65 9742:50
A vision for Android XR
13 дней – 99 08928:12
The Intel Arc B580: Midrange GPU Magic!
автотехномузыкадетское