آموزش ساخت منوی موبایلی برای المنتور با استفاده از ویجت Off-Canvas (ویدیوی آموزشی)

ساخت منوی موبایلی برای المنتور با استفاده از ویجت Off-Canvas ساده تر چیزی است که فکرش را میکنید. این منو به گونه‌ای طراحی می‌شود که در ابتدا نمایش داده نمی‌شود و تنها پس از کلیک کاربر بر روی یک دکمه یا لینک، به صورت کشویی از کنار صفحه ظاهر می‌شود. این تکنیک برای طراحی منوهای موبایلی بسیار کاربردی است و به شما کمک می‌کند تا فضای صفحه را بهینه‌تر مدیریت کنید.

در این قسمت از دوره جامع آموزش المنتور ، به شما آموزش می‌دهیم که چگونه با استفاده از ویجت Off-Canvas در المنتور، یک منوی موبایلی حرفه‌ای ایجاد کنید.

ویجت Off-Canvas چیست؟

ویجت Off-Canvas در المنتور به شما امکان می‌دهد محتوایی را ایجاد کنید که در ابتدای بارگذاری صفحه نمایش داده نمی‌شود. این محتوا تنها پس از انجام یک عمل خاص توسط کاربر، مانند کلیک بر روی یک دکمه، ظاهر می‌شود. به عنوان مثال مشابه کاری که برای پاپ آپ در المنتور کردیم، می‌توانید یک دکمه ایجاد کنید که با کلیک بر روی آن، یک گالری تصاویر یا یک منوی موبایلی نمایش داده شود.

نکته مهم:

برای استفاده از ویجت Off-Canvas، باید کانتینر فلکس باکس و عناصر تو در تو در المنتور فعال باشند.

نحوه فعالسازی عناصر تو در تو و کانتینر فلکس باکس را در آموزش تنظیمات المنتور ببینید.

مراحل ساخت منوی موبایلی برای المنتور با ویجت Off-Canvas

در این مثال، ما یک منوی موبایلی با چند آیتم ایجاد می‌کنیم: لوگو، دکمه بستن ، فهرست وردپرس و آیکن های شبکه های اجتماعی.

مرحله ۱: افزودن ویجت Off-Canvas به صفحه

1. ابتدا به صفحه‌ای که می‌خواهید منوی موبایلی را به آن اضافه کنید بروید.
2. از پنل ویجت‌های المنتور، ویجت Off-Canvas را به صفحه بکشید و رها کنید.
3. پس از افزودن ویجت، بخشی از صفحه خاکستری می‌شود و یک کانتینر جدید به طور خودکار ایجاد می‌شود.

مرحله ۲: افزودن آیتم‌های منو به کانتینر

1. بر روی کانتینر ایجاد شده کلیک کنید تا گزینه‌های آن را مشاهده کنید.
2. از بخش افزودن ویجت ، المان های مورد نیاز خود را به کانتینتر آف کنواس وارد کنید.

مرحله ۳: تنظیمات ویجت Off-Canvas

1. بر روی ناحیه خاکستری صفحه کلیک کنید تا گزینه‌های ویجت Off-Canvas نمایش داده شود.
2. در تب محتوا، می‌توانید تنظیمات مختلفی مانند حالت ویرایش ، نام ، موقعیت افقی و عمودی و همچنین اندازه عرض و ارتفاع Off-Canvas را تغییر دهید.
3. در بخش تنظیمات میتوانید انیمیشن ورودی و خروجی و همچنین تعاملات را مانند جلوگیری از بستن پاپ آپ با کلیک روی صفحه، جلوگیری از بسته شدن در ESC Overlay ، و همچنین غیر فعال کردن اسکرول صفحه را فعال یا غیر فعال کنید.

مرحله ۴: ایجاد دکمه برای فعال‌سازی منو

1. برای اینکه منوی موبایلی شما پس از کلیک بر روی یک دکمه نمایش داده شود، باید یک دکمه یا لینک ایجاد کنید.
2. یک ویجت آیکن به هر نسخه موبایلی خود اضافه کنید.
3. در بخش لینک ویجت، از منوی کشویی گزینه برچسب های سفارشی را انتخاب کنید.
4. در لیست باز شده، گزینه Off Canvas را انتخاب کنید.
5. در کادر متنی که ظاهر می‌شود، بر روی آیکون آچار کلیک کنید و در بخش تنظیمات ، عمل آنرا باز کردن Off Canvas انتخاب کنید.
6. از منوی کشویی انتخاب، ویجت Off-Canvas که ایجاد کرده‌اید را انتخاب کنید.

مرحله ۵: تست و ذخیره تغییرات

1. پس از انجام تنظیمات، حالت ویرایش را غیرفعال کنید و تغییرات را ذخیره کنید.
2. حالا اگر بر روی دکمه یا لینکی که ایجاد کرده‌اید کلیک کنید، منوی موبایلی شما به صورت کشویی از کنار صفحه ظاهر می‌شود.

تنظیمات پیشرفته ویجت Off-Canvas

ویجت Off-Canvas دارای تنظیمات پیشرفته‌ای است که به شما امکان می‌دهد ظاهر و عملکرد منوی موبایلی خود را به طور کامل سفارشی‌سازی کنید.

تب Content:

در این تب می‌توانید آیتم‌های منو را اضافه، حذف یا ویرایش کنید. همچنین می‌توانید تنظیمات مربوط به موقعیت افقی و عمودی منو را تغییر دهید.

تب Style:

در این تب می‌توانید ظاهر منو را تغییر دهید. تنظیماتی مانند نوع پس زمینه یا همچنین نوع حاشیه و شعاع کادر و سایه کادر در این بخش قرار دارند.

جمع‌بندی

با استفاده از ویجت Off-Canvas در المنتور، می‌توانید به راحتی منوهای موبایلی حرفه‌ای و کاربرپسند ایجاد کنید. این منوها نه تنها فضای صفحه را بهینه‌تر می‌کنند، بلکه تجربه کاربری بهتری را برای بازدیدکنندگان موبایلی سایت شما فراهم می‌کنند. با دنبال کردن مراحل بالا، می‌توانید در کمترین زمان یک منوی موبایلی زیبا و کاربردی برای سایت خود ایجاد کنید.

امیدواریم این آموزش برای شما مفید بوده باشد. اگر سوالی دارید یا به راهنمایی بیشتری نیاز دارید، در بخش نظرات با ما در میان بگذارید.