SIDENAV の解決方法を考える

今日の GUI チャレンジでは、CSS と JS を使用して、レスポンシブでアクセスしやすいスライドアウトのサイド ナビゲーションのユーザー エクスペリエンスを作成します。サイド ナビゲーションは、複数のブラウザ、画面サイズ、入力デバイスで動作します。よろしいでしょうか。Google では、グリッド、変換、疑似クラス、そして JavaScript を使用してこの UX を処理しています。

エピソードのリリース後 30 分間は、@AdamArgyleInk があなたのコメントに回答します。こちらからお問い合わせ、ご質問いただくか、独自のコードを送信してください。

章:

  • 0:00 - はじめに
  • 0:30 - デバッグコーナー機能の概要
  • 2:25 - グリッド += メディアクエリ スタックのレイアウト
  • 3:42 - アクセス可能な変換の移行
  • 4:22 - :target 疑似クラス
  • 5:57 - Esc キーの UX
  • 6:16 - オーケストレーションに焦点を当てる
  • 6:49 - スクリーン リーダーの UX
  • 7:56 - 結びと行動喚起

リソース:

その他の GUI チャレンジはこちら → https://goo.gle/GUIchallenges

Google Chrome Developers に登録 → http://goo.gl/LLLNvf

すべてのエピソードに戻る