В сегодняшней задаче по графическому пользовательскому интерфейсу мы создаем адаптивный, доступный пользовательский интерфейс с выдвижной боковой навигацией, используя CSS и JS. Sidenav работает в разных браузерах, размерах экрана и устройствах ввода. Рад, верно? Следите за тем, как мы используем сетку, преобразования, псевдоклассы и немного JavaScript для обработки этого UX.
@AdamArgyleInk будет отвечать на ваши комментарии в течение первых 30 минут после выхода эпизода. Свяжитесь с нами здесь, задайте вопросы или отправьте свой собственный код!
Главы:
- 0:00 - Введение
- 0:30 – Обзор функций угла отладки
- 2:25 – Сетка += Макет стека медиа-запросов
- 3:42 – Переход «Доступное преобразование»
- 4:22 - :target Псевдокласс
- 5:57 – Пользовательский интерфейс клавиши Escape
- 6:16 – Организация фокуса
- 6:49 – Пользовательский интерфейс программы чтения с экрана
- 7:56 – Аутро и призыв к действию
Ресурсы:
- Кодируйте → https://goo.gle/3sQ8Xif
- Читать дальше → https://goo.gle/2Np83J9
- Попробовать демо → http://goo.gle/3bVBFYT
- Посмотрите, как другие создают боковые навигаторы (представления в графическом интерфейсе) → https://goo.gle/36CAeuO
Посмотреть больше задач с графическим интерфейсом → https://goo.gle/GUIchallenges
Подписаться на рассылку для разработчиков Google Chrome → http://goo.gl/LLLNvf