شاید در بسیاری از سایت ها در حالت موبایل، منوی ناوبری که به صورت شناور در اسکرول صفحه به بالا و پایین همراه شما می آیند رو دیده اید. منویی که بیشتر در اپلیکیشن های موبایل مرسوم تر هستند.
یا برای مثال در سایت های فروشگاهی، هنگامی که وارد یک محصول می شوید دکمه افزودن به سبد به صورت شناور در صفحه قرار گرفته است.
در این مقاله قصد داریم تا با استفاده از افزونه المنتور یک منوی ناوبری برای برای دستگاه های موبایل ایجاد کنیم.
از نمونه های استفاده از این قابلیت در سایت www.rottentomatoes.com قابل مشاهده هست.rottentomatoes یک سایت مخصوص امتیاز دهی به فیلم و سریال می باشد. این سایت در حالت موبایل از Bottom navigation استفاده می کنید.
طراحی Bottom navigation با المنتور
طراحی فوتر در المنتور
برای این کار باید از بخش قالب ها به فوتر طراحی شده بریم و منوی ناوبری پایین را در این بخش اضافه کنیم.
بعد از طراحی فوتر، در پایین ترین بخش یک سکشن اضافه کنید. این بخش را به 4 ستون تقسیم کنید.
استایل Bottom navigation
حالا می خواهیم یک رنگ به پس زمینه این بخش بدیم. روی سکشن کلیک کنید و در تب استایل یک رنگ برای پس زمینه قرار دهید.
حالا ویرایشگر را در حالت موبایل قرار داده و هر کدام از ستون ها را روی مقدار 25 درصد قرار دهید. با این کار در موبایل هر 4 ستون در کنار هم قرار میگیرد.
ویجت های منو ناوبری
در هر یک از ستون ها یک ویجت آیکون و یک ویجت سربرگ قرار داده و اطلاعات مورد نظر را پر کنید.
سپس روی هر آیکون کلیک کرده و در بخش پیوند، آدرس صفحه مورد نظر را وارد کنید.
خب بعد از وارد کردن اطلاعت، باید این منو را در پایین صفحه ثابت نگه داریم. کافیه روی سکشن اصلی کلیک کنید و در تب پیشرفته، موشن افکت را انتخاب کنید.
در اینجا گزینه شناور را کلیک کنید و روی گزینه پایین قرار دهید.
مخفی کردن تبلت و دسکتاپ
حالا می خواهیم این منو را در حالت های تبلت و دسکتاپ مخفی کنیم.
کافیست روی سکشن اصلی کلیک کنید. تنظیمات پیشرفته، تب واکنشگرایی را زده و هر دو گزینه مخفی سازی در تبلت و دسکتاپ را روشن کنید.
در این حالت، منو فقط در دستگاه های موبایل نمیاش داده می شود.
نتجیه نهایی
در نهایت با روشن کردن گزینه شناور به حالت زیر نمایش داده خواهد شد.
امیدوارم که از این آموزش هم به خوبی استفاده کرده باشید. اگر مشکلی در اجرای آموزش دارید از بخش نظرات سوال کنید.
سلام و درود…
تمام مراحل اوکی هستن، فقط این قسمت وجود نداره:
“روی سکشن اصلی کلیک کنید و در تب پیشرفته، موشن افکت را انتخاب کنید.
در اینجا گزینه شناور را کلیک کنید و روی گزینه پایین قرار دهید”
یعنی واسه سکشن توی قسمت “موشن افکت”، گزینه “شناور” کلاً وجود نداره!
واسه المان‌ها گزینه‌ی پزیشن وجود داره که این کار رو واسه تک‌تک المان‌ها انجام میده ولی به هر حال باید کل سکشن پایین بیاد و ثابت شه تا این قضیه به درستی اجرا شه
ممنون میشم راهنمایی بفرمایید …
با سلام
آیا المنتور پرو هم نصب هست یا فقط نسخه معمولی المنتور ؟
نسخه معمولی نصبه … فکر کنم به جوابم رسیدم!
سلام دانلود سربرگ رایگان کجاست؟
با سلام
از طریق این لینک می تونید به سربرگ، فوتر های رایگان دسترسی داشته باشید.
سلام عالی بود مثل همیشه
سپاس
با سلام
ممنون از همراهی
خیلی جالبه .دمت گرم با اموزش های جالبتون
ممنون از همراهی