وقتی صحبت از طراحی سایت برای موبایل به میان می‌آید، یکی از مهم‌ترین بخش‌ها، ساخت یک منوی موبایل است. منوهای موبایل، مثل Hamburger Menu یا Sliding Menu، به ما کمک می‌کنند فضای محدود صفحه‌نمایش گوشی را مدیریت کنیم و در عین حال، تجربه کاربری خوبی به بازدیدکننده بدهیم. در این مقاله مادر، می‌خواهیم با مفاهیم اصلی مربوط به ساخت این منوها آشنا شویم، بدون اینکه وارد جزئیات کدنویسی شویم.

6.1 باز و بسته کردن منو

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

روش متداولی که برای این کار استفاده می‌شود، تغییر کلاس‌ها با toggle است. تصور کن یک منو داریم که در حالت عادی پنهان است. با اضافه یا حذف کردن یک کلاس (مثلاً کلاس active)، وضعیت نمایش منو عوض می‌شود. این شیوه باعث می‌شود نیازی نباشد هر بار استایل‌های زیادی را دستی تغییر بدهیم، بلکه فقط یک کلاس اضافه یا حذف شود و همین کلاس در CSS مشخص کند که منو باز یا بسته باشد.

اما مسئله مهم دیگری هم در این بخش وجود دارد و آن aria-expanded است. این ویژگی در دنیای Accessibility (دسترس‌پذیری) بسیار مهم است. با تغییر مقدار این ویژگی بین true و false، به نرم‌افزارهای کمکی مثل screen readerها اطلاع داده می‌شود که منو باز است یا بسته. مثلاً وقتی منو باز است، aria-expanded باید مقدار true داشته باشد. این کار کمک می‌کند افراد نابینا یا کم‌بینا هم بتوانند راحت‌تر با سایت کار کنند و بدانند چه اتفاقی در صفحه افتاده است.

پس در این بخش، دو موضوع اصلی داریم: تغییر کلاس‌ها برای باز و بسته شدن منو و استفاده از aria-expanded برای رعایت دسترس‌پذیری.

6.2 انیمیشن‌ها

باز و بسته شدن منو اگر بدون هیچ حرکتی باشد، حس خوبی به کاربر نمی‌دهد. به همین خاطر معمولاً از انیمیشن‌ها استفاده می‌شود. انیمیشن‌ها باعث می‌شوند باز شدن منو نرم و روان به نظر برسد و کاربر درک بهتری از اتفاقی که در صفحه می‌افتد داشته باشد.

یکی از رایج‌ترین روش‌ها برای ساخت انیمیشن در منوهای موبایل، استفاده از CSS Transition است. CSS Transition به ما امکان می‌دهد تغییرات در استایل‌ها به‌صورت تدریجی اتفاق بیفتند، مثلاً تغییر opacity یا تغییر موقعیت منو از بیرون صفحه به داخل صفحه به آرامی انجام شود. این کار ظاهری مدرن و حرفه‌ای به سایت می‌دهد.

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

در کل، در این بخش دو مفهوم مهم وجود دارد: CSS Transition برای انیمیشن‌های ساده و تغییر ارتفاع یا opacity با JavaScript برای زمانی که کنترل بیشتری لازم داریم.

6.3 بستن منو هنگام کلیک خارج از آن

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

یکی از تکنیک‌های مهم در این بخش، استفاده از Event Bubbling است. Event Bubbling یعنی وقتی کاربر روی یک المان در صفحه کلیک می‌کند، آن رویداد به سمت بالاترین المان‌های صفحه (مثلاً body یا document) منتقل می‌شود. این ویژگی کمک می‌کند بتوانیم با نوشتن یک Listener کلی روی کل صفحه، بفهمیم کاربر خارج از منو کلیک کرده است یا نه.

برای این کار، معمولاً یک شنونده رویداد روی کل سند (document) اضافه می‌کنیم. مثلاً وقتی کاربر هر جایی در صفحه کلیک کند، بررسی می‌کنیم که آیا این کلیک داخل منو بوده است یا خارج از آن. اگر خارج از منو بوده باشد، منو را می‌بندیم. این کار باعث می‌شود منو همیشه مدیریت‌شده و منظم باز و بسته شود.

پس در این بخش، دو مفهوم اساسی داریم: Event Bubbling و استفاده از document.addEventListener برای تشخیص کلیک خارج از منو.

✅ هدف

هدف از یادگیری همه این مفاهیم، این است که بتوانی یک منوی موبایل حرفه‌ای، زیبا و دسترس‌پذیر بسازی که هم از نظر ظاهری جذاب باشد و هم تجربه کاربری خوبی به مخاطب ارائه کند. منوهای موبایل، نقش بسیار مهمی در طراحی سایت‌های مدرن دارند و اگر درست ساخته شوند، تأثیر زیادی روی کیفیت و اعتبار سایتت خواهند داشت.