منوی تلفن همراه JavaScript-کمتر با Tailwind

در مرحله بعد ، ما باید نمای (معمولاً یک آیکون همبرگر یا کباب) را انتخاب کنیم که با وانمود کردن منو ، کاربر را فریب می دهد. برای سادگی ، بیایید از برخی از کاراکتر های یونیکد که سه نقطه و یک تصویر X را به تصویر می کشد ، استفاده کنیم. ما همچنین باید شخصیت اصلی ترفند کوچک خود را معرفی کنیم - کادر انتخاب:

در آخر ، لیست نامحدودی را که به عنوان منوی ناوبری ما عمل می کند ، اضافه کنید:

نکته اصلی در اینجا این است که کادر انتخاب ، نمادها و لیست همه عناصر خواهر و برادر هستند، به عنوان همسالان در Tailwind مشخص شده است.

مرحله 2: سبک های Tailwind

اکنون که نشانه گذاری خود را در جای خود قرار داده ایم ، می توانیم یک ظاهر طراحی را شروع کنیم.
بیایید با ساخت ظرف خود شروع کنیم hidden در صفحه های بزرگتر و تنظیم موقعیت آن روی relative:

چرا ما آن را می خواهیم relative؟ از آنجا که این ترفند به z-index خاصیت ، ما می خواهیم همه چیز را تمیز نگه داریم و یک زمینه انباشت "محلی" را در ظرف خود ایجاد کنیم. همچنین ، z-index فقط با عناصری که در غیر این صورت قرار دارند کار می کند staticبشر بیایید کلاسهای ابزار را به کادر انتخاب اضافه کنیم:

در اینجا تجزیه و تحلیل آنچه اتفاق افتاده است:

• opacity-0 کادر انتخاب را برای چشم ها نامرئی می کند ، در حالی که موقعیت و تعامل آن را دست نخورده نگه می دارد.
• z-10 کادر انتخاب یک سطح بالاتر از خواهر و برادر را در داخل قرار می دهد mobile-menu-container؛
• absolute عنصر ورودی را در خارج از جریان عادی سند قرار می دهد ، بنابراین دیگر فضایی را که به طور معمول در آن قرار می گیرد اشغال نمی کند ، که به ما امکان می دهد آن را قرار دهیم بالا خواهر و برادرهای آن ؛
• peer یک کلاس ابزار است که به ما امکان می دهد عناصر خواهر و برادر را بر اساس خواص و وضعیت این عنصر خاص سبک کنیم.

این حداقل تنظیم برای کادر انتخاب ما است. بیایید اکنون توجه خود را به نمادها تغییر دهیم. دلیل اینکه ما دو آیکون داریم ساده است: آنها بسته به وضعیت کادر انتخاب ، مکان ها را تغییر می دهند:

بیایید این را کمی خراب کنیم:

• relative، باز هم ، به عناصر اجازه می دهد تا از آنها استفاده کنند z-index، اما آنها را از جریان اسناد عادی خود منتقل نمی کند.
• z-0 - از نظر فنی ، ما نیازی به تنظیم نداریم z-index در اینجا (ورودی قبلاً در بالای نمادها قرار داده شده است) ، اما ما می خواهیم در مورد هدف ما صریح باشیم ، که این عناصر خاص را در زیر کادر انتخاب قرار می دهد.
• block وت hidden حالت های اولیه نمادها را تنظیم کنید-کباب به عنوان قابل مشاهده ، و X-Mark همانطور که در ابتدا پنهان است.
• peer-checked:hidden وت peer-checked:block پنهان می کند kebab و فاش می کند x-mark وقتی peer کادر انتخاب دارای وضعیت checkedبشر

به طور دقیق ، این ترفند کامل است. ما دیدگاه این عناصر را بر اساس وضعیت کادر انتخاب دستکاری می کنیم. اما عنوان به شما یک منوی موبایل قول داده است ، بنابراین بیایید همان منطق را در لیست بدون نظارت اعمال کنیم:

و این اساساً همین است! اکنون می توانیم دید منو را بدون هیچ گونه JavaScript تغییر دهیم! این یکی برای همه نفرت های جاوا اسکریپت در آنجا است.

(جایزه) مرحله 3: بیایید آن را زیبا کنیم!

اگر آن را تا پایان ساخته اید - در زیر نسخه زیباتر این منو نهفته است. و در دسترس تر ، زیرا دسترسی با تعریف زیبا است. به عنوان مثال ، این نسخه پیشرفته (که در مثال مرتبط و قطعه ای که در حال بررسی آن هستید مشاهده می شود) دسترسی را از طریق چندین پیشرفت خاص تقویت می کند:

• توضیحات کنترل پاک تر: کادر زیربنایی که اغلب از نظر بصری پنهان می شود (به عنوان مثال ، با استفاده از یک sr-only کلاس) اما برای فن آوری های کمکی در دسترس است. توصیفی داده شده است aria-label مانند "Open or close navigation menu" به وضوح هدف خود را بیان کنید.
• پیوند برنامه ای: در aria-controls ویژگی برای ایجاد یک پیوند برنامه ای با پانل منو به کادر انتخاب اضافه می شود (به عنوان مثال ، id="mobile-menu-panel") که نشان می دهد و پنهان می شود. این به فن آوری های کمکی کمک می کند تا رابطه بین کنترل و محتوای آن را تحت تأثیر قرار دهند.
• ضامن بصری قابل تمرکز: قسمت قابل مشاهده ای که کاربران روی آن کلیک می کنند یا ضربه می زنند (اغلب همراه با کادر انتخاب) به صراحت از صفحه کلید قابل تمرکز ساخته شده است (به عنوان مثال ، با استفاده از tabindex="0" اگر این یک عنصر ذاتاً قابل توجه نباشد که به عنوان برچسب عمل می کند) و شاخص های فوکوس بصری روشن را دریافت می کند (مانند focus:ring-2 focus:ring-white).
• منطقه منوی معنایی: به خود پانل منو داده شده است role="region" و aria-label (به عنوان مثال ، "Mobile navigation") برای تعریف آن به عنوان یک منطقه برجسته مشخص ، باعث می شود که کاربران خواننده صفحه نمایش بتوانند از ساختار صفحه استفاده و درک کنند.
• قابلیت تمرکز پیشرفته: همه عناصر تعاملی در منوی باز ، مانند پیوندهای ناوبری و هر دکمه صریح "منوی نزدیک" (که ممکن است یک باشد برای همان کادر انتخاب) ، با سبک های فوکوس روشن و قابل مشاهده طراحی شده اند.

امیدوارم که این مثالها به شما الهام بخش باشد تا چیزی را بهتر کنید!

کد را در اینجا بررسی کنید ==> play.tailwindcss.com

توجه: در برنامه نویسی ، هر تصمیمی مبادله ای است

یکی از ویژگی های برنامه نویسی رایانه ای که باعث می شود همه ما در همان زمان احساس قدرت و قدرت کنیم ، این واقعیت است که همه چیز را می توان به روش های بی شماری انجام داد - که هر تصمیم را به یک تجارت تبدیل می کند. در اینجا برخی از ملاحظات قابل توجه در مورد مزایا و اشکالات این اجرای یک منوی ناوبری موبایل آورده شده است:

نقاط قوت:

1. عملیات بدون جاوا اسکریپت: با اطمینان و بدون برنامه نویسی سمت مشتری ، تقویت استحکام و سازگاری گسترده کار می کند.
2. تعامل با CSS: اهرم های اجرا ، CSS بومی برای انیمیشن های صاف و مدیریت دولت ، از جلوگیری از بالای سر جاوا اسکریپت.
3. دسترسی به هسته قابل دستیابی است: کادر انتخاب خود ناوبری اصلی صفحه کلید را ارائه می دهد. با افزودنی مانند ویژگی های آریا و شاخص های تمرکز سفارشی (همانطور که در مثال مرتبط نشان داده شده است) ، دسترسی به هسته خوب امکان پذیر است.
4. اجرای سبک وزن: از وزن و اجرای پرونده JavaScript جلوگیری می کند ، که به طور بالقوه منجر به ارائه سریعتر مؤلفه می شود.

نقاط ضعف:

1. شکافهای پیشرفته دسترسی: فاقد ویژگی های وابسته به جاوا اسکریپت مانند به دام انداختن فوکوس واقعی در منوی باز یا پویا است aria-expanded روی یک دکمه معنایی.
2. سازش معنایی: یک کادر انتخاب برای جابجایی UI ، که یک راه حل کاربردی است به جای نقش معنایی اصلی عنصر است.
3. الگوهای UX محدود: نمی توان پیشرفت های تجربه کاربری مشترک مانند "کلیک کردن برای بستن" یا "Escape Key" را اجرا کرد.
4. استحکام ساختاری: برای عملکرد انتخاب کنندگان CSS ، به یک ترتیب خاص عنصر HTML و روابط خواهر و برادر نیاز دارد و باعث کاهش انعطاف پذیری طرح می شود.

این یک هک جالب است ، اما با این وجود هک. با تشکر از خواندن!

خواندن بیشتر

اسناد وب MDN:
ترکیب کننده خواهر و برادر بعدی
درک Z-Index
راهنماهای آریا

اسناد CSS Tailwind:
یک ظاهر طراحی شده بر اساس دولت خواهر و برادر
برنامه های کاربردی برای کنترل ترتیب پشته یک عنصر.

CSS-Tricks:
سه گزینه CSS برای ناوبری جاوا اسکریپت
مفاهیم منوی پاسخگو