در چالش رابط کاربری گرافیکی امروزی، ما با استفاده از CSS و JS، یک تجربه کاربری ناوبری جانبی با قابلیت پاسخ‌گو و قابل دسترس ایجاد می‌کنیم. sidenav روی چندین مرورگر، اندازه صفحه نمایش و دستگاه های ورودی کار می کند. راد درسته؟ همانطور که از شبکه، تبدیل ها، کلاس های شبه و یک جاوا اسکریپت برای مدیریت این UX استفاده می کنیم، دنبال کنید.
@AdamArgyleInk در 30 دقیقه اول پس از انتشار قسمت به نظرات شما پاسخ خواهد داد. در اینجا با ما ارتباط برقرار کنید، سؤال بپرسید یا کد خود را ارسال کنید!
فصل ها:
- 0:00 - مقدمه
- 0:30 - بررسی اجمالی ویژگی گوشه اشکال زدایی
- 2:25 - Grid += Media Query Stack Layout
- 3:42 - انتقال تبدیل قابل دسترسی
- 4:22 - :target شبه کلاس
- 5:57 - Escape Key UX
- 6:16 - تمرکز ارکستراسیون
- 6:49 - Screen Reader UX
- 7:56 - Outro & Call To Action
منابع:
- کد همراه → https://goo.gle/3sQ8Xif
- به همراه بخوانید → https://goo.gle/2Np83J9
- یک نسخه آزمایشی → http://goo.gle/3bVBFYT را امتحان کنید
- ببینید که چگونه دیگران در حال ساخت نوارهای جانبی هستند (ارسالهای GUI) → https://goo.gle/36CAeuO
چالش‌های رابط کاربری گرافیکی بیشتر → https://goo.gle/GUIchallenges را تماشا کنید
در Google Chrome Developers → http://goo.gl/LLLNvf مشترک شوید