No desafio da interface gráfica do usuário de hoje, criamos uma experiência do usuário de navegação lateral de saída responsiva e acessível usando CSS e JS. A navegação lateral funciona em vários navegadores, tamanhos de tela e dispositivos de entrada. Incrível, né? Acompanhe enquanto empregamos grade, transformações, pseudoclasses e um pouco de JavaScript para lidar com essa UX.
@AdamArgyleInk vai responder aos seus comentários nos primeiros 30 minutos após o lançamento do episódio. Conecte-se conosco aqui, faça perguntas ou envie seu próprio código.
Capítulos:
- 0:00 - Introdução
- 0:30 - Visão geral do recurso de canto de depuração
- 2:25 - Grade += Layout da pilha de consulta de mídia
- 3:42 - Transição de transformação acessível
- 4:22 - Pseudoclasse :target
- 5:57 - Escape Key UX
- 6:16 - Foco de orquestração
- 6:49 - UX do leitor de tela
- 7:56 - Encerramento e call-to-action
Resources:
- Adicione o código → https://goo.gle/3sQ8Xif
- Saiba mais → https://goo.gle/2Np83J9
- Confira uma demonstração → http://goo.gle/3bVBFYT
- Saiba como outras pessoas estão criando navegação lateral (envios de GUI) → https://goo.gle/36CAeuO
Assista mais desafios da GUI → https://goo.gle/GUIchallenges
Inscreva-se no canal de desenvolvedores do Google Chrome → http://goo.gl/LLLNvf