با استفاده از CSS یک منوی ناوبری افقی بسازید که آیتمها هنگام هاور رنگ و یک زیرخط متحرک نشان دهند و در صفحههای کوچک به منوی عمودی تغییر کند.
5.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:37 0.0
برای حل: ساختار HTML سادهای با ul > li > a داشته باشید و با CSS از display:flex برای چیدمان افقی استفاده کنید؛ list-style:none و padding/margin را تنظیم کنید. برای زیرخط متحرک از یک pseudo-element مثل a::after با width صفر و transition استفاده کنید که در حالت :hover گسترده شده و رنگ تغییر کند. برای واکنشگرایی از @media (مثلاً max-width:600px) استفاده کنید و flex-direction را به column تغییر دهید تا منو عمودی شود. نکات: از transition برای انیمیشن نرم، box-sizing و فضای داخلی مناسب استفاده کنید و حالات :focus را برای دسترسیپذیری فراموش نکنید.
توسط پژوهشگر در 202 روز قبل ساعت 02:37 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
استفاده از ::after برای زیرخط متحرک ایدهٔ خوبی است، اما برای دسترسپذیری بهتر از :focus-visible استفاده کنید تا کاربران با کیبورد هم تمرکز منو را ببینند. با box-sizing: border-box و تنظیم مناسب padding، اندازهٔ آیتمها پایدار میماند و از جابهجایی ناخواسته جلوگیری میکند. برای واکنشگرایی، تغییر flex-direction به column در @media مفید است؛ اما افزودن gap مناسب و فاصلهٔ داخلی مناسب در حالت عمودی تجربهٔ کاربری را بهبود میدهد. همچنین میتوانید با استفاده از @media (prefers-reduced-motion: reduce) انیمیشنها را برای کاربرانی که حرکت را ترجیح نمیدهند خاموش کنید.
گزارش