Thinking on ways to solve a SIDENAV

Appears in: GUI Challenges

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.

@Adam Argyle 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!

00:00 Introduction
00:30 Debugging Corner Feature Overview
02:25 Grid += Media Query Stack Layout
03:42 Accessible Transform Transition
04:22 :target Pseudo Class
05:57 Escape Key UX
06:16 Orchestrating Focus
06:49 Screen Reader UX
07:56 Outro & Call To Action

Code along →
Read along →
Try a demo →

Watch more GUI Challenges →
See how others are building sidenavs (GUI Submissions) →
Subscribe to Google Chrome Developers →

#GUIchallenges #CSS #ChromeDeveloper