Thinking on ways to solve a SIDENAV

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=uiZqDLqjGRY


Duration: 8:33
24,456 views
924

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 → https://goo.gle/3sQ8Xif
Read along → https://goo.gle/2Np83J9
Try a demo → http://goo.gle/3bVBFYT
See how others are building sidenavs (GUI Submissions) → https://goo.gle/36CAeuO

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

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2021-03-02New in Chrome 89: Web Serial, HID, NFC, PWA installability changes, and more!
2021-03-02Writing Good Alt Text - HTTP 203
2021-02-25[粤语] Chrome 89 - DevTools 的最新功能
2021-02-25Chrome 89 - What’s New in DevTools
2021-02-23Scheduling Tasks - HTTP 203
2021-02-21Celebrating International Mother Language Day
2021-02-17Thinking on ways to solve TABS
2021-02-09JavaScript counters the hard way - HTTP 203
2021-02-03Submission shoutouts for SIDENAV
2021-01-26Dithering - HTTP 203
2021-01-21Thinking on ways to solve a SIDENAV
2021-01-19New in Chrome 88: Manifest v3, aspect-ratio, digital goods API, and more!
2021-01-14Chrome 88 - What’s New in DevTools
2021-01-13Submission shoutout for CENTERING
2020-12-24The best of Chrome games | Chrome Developer Summit 2020
2020-12-233x3 SEO tips for JavaScript web apps
2020-12-23Patterns for privacy
2020-12-23Payment and address form best practices
2020-12-23Upgrading DevTools' architecture to the modern web
2020-12-22Canvas2D is getting an update
2020-12-22Design at scale with Web Components (and ducks)


Tags:
GDS: Yes
Sidenav
side nav
site nav
site navigation
sidenav css
side nav css how to create a side nav
responsive side nav
accessible side nav
side navigation
layout
animation
responsive
Google Chrome
GUI Challenges
Google Chrome Developers
Chrome developers
developers
chrome
Chrome developer tools tutorial
developer tutorial
Chrome developer tutorial
chrome dev tools
web development