معرفی کتابخانه Flyout Menu

در طراحی رابط کاربری، همیشه ساخت یک منوی چندسطحی زیبا و در عین حال کاربردی، چالشی تکراری بوده است. منویی که هم روی دسکتاپ روان باز شود، هم روی موبایل درست کار کند، و در عین حال با زبان‌های راست‌به‌چپ هم مشکلی نداشته باشد.
مدتی پیش به دنبال راه‌حلی سبک و حرفه‌ای برای این موضوع بودم و نتیجه‌ی آن، کتابخانه‌ی Multi-Level Flyout Menu شد.

این کتابخانه‌ی متن‌باز با جاوااسکریپت و Bootstrap 5 کار می‌کند و به شما اجازه می‌دهد منوهایی با بی‌نهایت سطح زیرمنو بسازید؛ منوهایی که بسته به زبان صفحه، خودشان تصمیم می‌گیرند به چپ باز شوند یا به راست، و روی دستگاه‌های لمسی یا دسکتاپ، رفتار متفاوت و هوشمندی دارند.

یکی از جذاب‌ترین بخش‌های پروژه برای من، پشتیبانی کامل از حالت تاریک بود. در هر مرورگر و سیستمی که کاربر تم تیره فعال کرده باشد، منو به‌صورت خودکار تطبیق پیدا می‌کند و حتی رنگ‌ها را از طریق CSS Variables می‌توان تغییر داد. هیچ لرزشی در تغییر تم دیده نمی‌شود و تجربه‌ای نرم و چشم‌نواز ارائه می‌دهد.

از نظر پیاده‌سازی، کار ساده‌تر از آن چیزی است که فکرش را کنید. تنها با چند خط کد و یک ساختار ساده‌ی JSON می‌توانید یک منوی کامل داشته باشید. به‌عنوان نمونه، چند سطر زیر کافی است تا یک دسته‌بندی الکترونیک با زیرمنوهای لپ‌تاپ و موبایل بسازید.

برای صفحات فارسی، تنها کافی است تگ والد را با ویژگی dir="rtl" بنویسید و تمام. منو خودش جهت باز شدن را تشخیص می‌دهد.

در توسعه این پروژه به دسترسی‌پذیری هم توجه ویژه‌ای شده است. تمام ناوبری‌ها با کیبورد انجام می‌شود، رنگ‌ها نسبت کنتراست استاندارد دارند و تمام المان‌ها با Screen Readerها سازگارند. در اندازه‌های کوچک‌تر از ۷۶۸ پیکسل هم منو به‌صورت خودکار به حالت آکاردئون تبدیل می‌شود تا روی موبایل تجربه‌ی بهتری ارائه دهد.

در عین سادگی، Multi-Level Flyout Menu گزینه‌های سفارشی‌سازی زیادی دارد. از تم‌های آماده مثل Dracula و Nord گرفته تا رنگ‌های دلخواه خودتان که با چند خط CSS می‌توانید تعریف کنید. همه چیز ماژولار، سبک و سریع است؛ تنها ۸ کیلوبایت حجم برای چیزی که به‌سادگی در هر پروژه‌ای جا می‌گیرد.

اگر در حال ساخت یک پنل مدیریتی، فروشگاه آنلاین یا داشبورد تحلیلی هستید، احتمالاً این کتابخانه همان چیزی است که همیشه دنبالش بودید. با پشتیبانی کامل از RTL، Dark Mode، و رعایت استانداردهای WCAG 2.1، دیگر لازم نیست نگران جزئیات ریز منوها باشید.

پروژه روی گیت‌هاب در دسترس است و مستندات کامل فارسی و انگلیسی به همراه مثال‌های آماده در آن وجود دارد.
اگر علاقه‌مند بودید، خوشحال می‌شوم بازخوردتان را در گیت‌هاب یا شبکه‌های اجتماعی بخوانم — اینکه چطور از آن استفاده کردید و چه ویژگی‌هایی را دوست دارید به نسخه‌های بعدی اضافه شود.

آیا تا به حال در پروژه‌ای مجبور شده‌اید یک منوی چندسطحی از صفر بسازید؟
اگر بله، فکر می‌کنید این کتابخانه چه تغییری در روند کارتان ایجاد می‌کند؟

لینک پروژه در گیت هاب:
https://github.com/delphiassistant/FlyoutMenu

#JavaScript
#Bootstrap5
#RTL
#DarkMode
#UI
#UX
#توسعه_وب
#جاوااسکریپت
#رابط_کاربری
#کتابخانه_جاوااسکریپت