درس 42؛ منوی واکنش گرا با HTML و CSS
ZIP را استخراج و index.html را باز کنید. اینترنت یا نصب لازم نیست.
کمتر از 800px فقط details موبایل دیده می شود. با کلیک یا Tab و Enter/Space روی summary باز و بسته کنید؛ سپس با Tab لینک ها را دنبال کنید.
از 800px، منوی دسکتاپ دیده می شود و نسخه موبایل display:none دارد. دو فهرست در HTML هستند اما تنها یکی در هر عرض نمایش و دسترس پذیری دارد. لینک های دو نسخه را همزمان به روز کنید.
در 320، 799، 800 و 1280px آزمایش کنید. متن لینک ها را بلند و مرورگر را 200 درصد بزرگ نمایی کنید. focus باید دیده شود و کل صفحه اسکرول افقی نگیرد.
منوی details بعد از انتخاب لینک خودکار بسته نمی شود و با Escape یا کلیک بیرون الزاماً بسته نمی شود؛ این نمونه پنل شناور یا منوی اپلیکیشن نیست. برای رفتار سفارشی جاوااسکریپت لازم است.
اگر هنگام تغییر عرض فوکوس روی نسخه پنهان شونده باشد، رفتار مرورگر را بررسی کنید؛ مدیریت انتقال فوکوس در نسخه تولیدی به کد تکمیلی نیاز دارد.
تمرین: practice-list از 640px ردیفی و چندخطی شود؛ حالت پایه ستونی بماند.
پاسخ: بعد از style.css در head بنویسید:
<link rel="stylesheet" href="solution.css">
با 639 و 640px مقایسه کنید.
