Думаем о способах решения SIDENAV

В сегодняшней задаче по графическому пользовательскому интерфейсу мы создаем адаптивный, доступный пользовательский интерфейс с выдвижной боковой навигацией, используя 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/GUIchallenges

Подписаться на рассылку для разработчиков Google Chrome → http://goo.gl/LLLNvf

Вернуться ко всем сериям