آموزش طراحی منو ناوبری موبایل (Bottom navigation) با استفاده از المنتور

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print

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

یا برای مثال در سایت های فروشگاهی، هنگامی که وارد یک محصول می شوید دکمه افزودن به سبد به صورت شناور در صفحه قرار گرفته است.

در این مقاله قصد داریم تا با استفاده از افزونه المنتور یک منوی ناوبری برای برای دستگاه های موبایل ایجاد کنیم.

منو موبایل

از نمونه های استفاده از این قابلیت در سایت www.rottentomatoes.com قابل مشاهده هست.rottentomatoes یک سایت مخصوص امتیاز دهی به فیلم و سریال می باشد. این سایت در حالت موبایل از Bottom navigation استفاده می کنید.

طراحی Bottom navigation با المنتور

طراحی فوتر در المنتور

برای این کار باید از بخش قالب ها به فوتر طراحی شده  بریم و منوی ناوبری پایین را در این بخش اضافه کنیم.

بخوانید : چگونه یک فوتر سفارشی با المنتور طراحی کنیم ؟

بعد از طراحی فوتر، در پایین ترین بخش یک سکشن اضافه کنید. این بخش را به 4 ستون تقسیم کنید.

طراحی منو موبایل با المنتور

استایل Bottom navigation

حالا می خواهیم یک رنگ به پس زمینه این بخش بدیم. روی سکشن کلیک کنید و در تب استایل یک رنگ برای پس زمینه قرار دهید.

طراحی منو موبایل با المنتور

حالا ویرایشگر را در حالت موبایل قرار داده و هر کدام از ستون ها را روی مقدار 25 درصد قرار دهید. با این کار در موبایل هر 4 ستون در کنار هم قرار میگیرد.

طراحی منو موبایل با المنتور

ویجت های منو ناوبری

در هر یک از ستون ها یک ویجت آیکون و یک ویجت سربرگ قرار داده و اطلاعات مورد نظر را پر کنید.

طراحی منو موبایل با المنتور

سپس روی هر آیکون کلیک کرده و در بخش پیوند، آدرس صفحه مورد نظر را وارد کنید.

طراحی منو موبایل با المنتور

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

در اینجا گزینه شناور را کلیک کنید و روی گزینه پایین قرار دهید.

طراحی منو موبایل با المنتور

مخفی کردن تبلت و دسکتاپ

حالا می خواهیم این منو را در حالت های تبلت و دسکتاپ مخفی کنیم.

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

طراحی منو موبایل با المنتور

در این حالت، منو فقط در دستگاه های موبایل نمیاش داده می شود.

نتجیه نهایی

در نهایت با روشن کردن گزینه شناور به حالت زیر نمایش داده خواهد شد.

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

فهرست مطالب

میلاد خانی
میلاد خانی در 20:36

خیلی جالبه .دمت گرم با اموزش های جالبتون

پاسخ
المنتور فارسی
المنتور فارسی در 20:44

ممنون از همراهی

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

2 × 2 =

نیاز به کمک دارید؟ پیام دهید
  • بازگشت به کتابخانه