فکر کردن به راه های حل یک SIDENAV
با مجموعهها، منظم بمانید
ذخیره و دستهبندی محتوا براساس اولویتهای شما.
در چالش رابط کاربری گرافیکی امروزی، ما با استفاده از 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/GUIchallenges را تماشا کنید
در Google Chrome Developers → http://goo.gl/LLLNvf مشترک شوید
arrow_back بازگشت به همه قسمت ها
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2021-01-21 بهوقت ساعت هماهنگ جهانی.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"اطلاعاتی که نیاز دارم وجود ندارد"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"بیشازحد پیچیده/ مراحل بسیار زیاد"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"قدیمی"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"مشکل ترجمه"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"مشکل کد / نمونهها"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"غیره"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"درک آسان"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"مشکلم را برطرف کرد"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"غیره"
}]
{"lastModified": "\u062a\u0627\u0631\u06cc\u062e \u0622\u062e\u0631\u06cc\u0646 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc 2021-01-21 \u0628\u0647\u200c\u0648\u0642\u062a \u0633\u0627\u0639\u062a \u0647\u0645\u0627\u0647\u0646\u06af \u062c\u0647\u0627\u0646\u06cc."}
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2021-01-21 بهوقت ساعت هماهنگ جهانی."],[],[]]