یک منوی ناوبری افقی ساده با سه آیتم طراحی کنید که آیتم فعال مشخص باشد، با افکت hover تغییر رنگ دهد و در صفحه‌های کوچک با استفاده از CSS (بدون جاوااسکریپت) به منوی همبرگری قابل باز و بسته شدن تبدیل شود.

این طراحی با ساختار ساده HTML (ul > li > a) و CSS، با استفاده از display: flex برای چیدمان افقی و افکت hover/active به خوبی کار می‌کند. برای موبایل می‌توانید از ترفند checkbox مخفی و label به عنوان آیکون همبرگر استفاده کنید و با سلکتور :checked ~ ul نمایش/پنهان شدن منو را کنترل کنید. برای دسترسی‌پذیری، فعال بودن آیتم با کلاس .active یا :focus را پشتیبانی کنید و از :focus-visible یا outline واضح استفاده کنید. همچنین به رفتار کار با کاهش motion کاربران توجه کنید و اگر prefers-reduced-motion فعال است انیمیشن‌ها را کاهش دهید.