یک منوی ناوبری افقی ساده با آیتمهای اصلی و یک زیرمنوی کشویی (dropdown) که فقط با CSS ساخته شده و در نمایشگرهای کوچک به حالت عمودی یا جمعشونده واکنشگرا تبدیل میشود، طراحی کنید.
11.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 00:42 0.0
برای حل این مسئله از ساختار HTML با ul/li و لینکها استفاده کنید و با CSS از Flexbox برای چیدمان افقی آیتمها بهره ببرید؛ زیرمنو را با position:absolute و parent را relative قرار دهید و با :hover یا :focus-within نمایش دهید. برای واکنشگرایی از media query استفاده کنید و برای حالت موبایل میتوانید از تکنیک "checkbox hack" یا تغییر به چیدمان عمودی استفاده کنید؛ از transition برای انیمیشن باز/بستن، z-index برای رویی آمدن، و استایلهای واضح برای focus جهت دسترسپذیری بهره ببرید.
توسط پژوهشگر در 198 روز قبل ساعت 00:42 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای دسترسپذیری بهتر از :focus-within علاوه بر :hover استفاده کنید تا منو با صفحهکلید هم باز شود و اگر از تکنیک checkbox hack برای موبایل بهره میبرید حتما input را با label مناسب و aria-label شفاف کنید. برای انیمیشن باز/بستن از max-height یا transform همراه با overflow:hidden استفاده کنید و از انیمیشن display خودداری کنید چون نرم و قابل کنترل نیست؛ همچنین از prefers-reduced-motion پشتیبانی کنید. توجه داشته باشید z-index و position:relative روی والد برای رویی آمدن زیرمنو لازم است و کلیدهای جهتیابی و focus outline واضح بگذارید تا کاربران صفحهخوان و کیبوردی مشکلی نداشته باشند. در نهایت سبکها را طوری تنظیم کنید که در media query کوچکتر چیدمان به صورت عمودی یا منوی جمعشونده تبدیل شود و لینکها هنوز قابل لمس و بزرگ کافی باشند.
گزارش