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

در این مقاله بسیار مفید می خوام که نحوه ساخت یک استایل منوی اپلیکیشن موبایل رو بهتون آموزش بدم که چطور یک منوی همانند اپلیکیشن موبایل همانند اینستاگرام با یک منوی کاملا حرفه ای و زیبا مواجه بشه و بتونه به بخش های مختلف وب سایت شما هدایت بشه. همچنین بهتون پیشنهاد می کنم که حتماً مقاله قبلی که عنوانش بود آموزش ریسپانسیو کردن سایت با المنتور را هم مشاهده بکنید تا در این آموزش هیچ مشکلی نداشته باشید پس در ادامه همراه ما باشید.

آیا در این آموزش از افزودنی استفاده کردیم؟

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

آموزش ساخت منوی اپلیکیشن موبایل با المنتور

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

 پیش نیازهای آموزش

• آموزش رایگان المنتور
• افزونه المنتور
• افزونه المنتور پرو

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

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

 ویرایش صفحه مورد نظر با المنتور

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

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

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

سپس در سکشن یا ستونی که ایجاد کردید اول یک ابزار آیکون قرار بدید و در ریزش یک ابزارک سربرگ قرار بدید، مانند تصویر زیر :

حالا به تنظیمات آیکون برید و چیدمان را همانند تصویر زیر به حالت وسط چین تغییر بدید :

سپس به تب استایل ابزارک آیکون بیاید و رنگ اولیه رو روی کد رنگ #4A4A4A تنظیم کنید اندازه و آن را روی ۲۰ قرار بدید :

سپس به تنظیمات ابزارک سربرگ بیاید و توی تب استایل رنگ متن و روی کد رنگ #3E3E3E تنظیم کنید و تایپوگرافی اون رو سایزش روی ۱۴ قرار بدید و وزن فونت روی ۴۰۰ تنظیم بکنید.

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

حالا به تنظیمات ستون برید  و عرض ستون رو روی ۲۰ تنظیم بکنید.

خوب الان ما وقتی عرضش رو روی ۲۰ تنظیم کردیم، یعنی ما میتونیم پنج تا از این ستون‌ها ایجاد بکنیم اول از همه شما باید ستون خودتون رو هم آیکونش و هم متنش رو تغییر بدید من برای مثال یک آیکون خانه قرار میدم همانند تصویر زیر :

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

شما باید چهار بار از ستون خودتون یک کپی تهیه کنید تا پنج تا ستون کنار همدیگه نمایش داده بشه و بعد از چهار بار کپی باید منو شما همانند تصویر زیر ظاهر بشه.

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

حالا به تنظیمات سکشن یا بخش موردنظر برید (بخشی که منوها درون اون هستن) و در بخش استایل نوع پس زمینه رو رنگش روی کد رنگ #F9F9F9 تنظیم بکنید.

سپس باز هم در بخش استایل بخش مورد نظر به بخش حاشیه بیاید و سایه کادر رو بزنید و کد رنگ آن را rgba(0, 0, 0, 0.12) قرار بدید همانند تصویر زیر

سپس روی پیشرفته بیایید و گزینه ایندکس Z روی ۱۰۰ قرار بدید.

سپس  به بخش CSS سفارشی بیاید و کدهای زیر رو درون این بخش وارد بکنید :

selector {position: fixed;bottom:0;}

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

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

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

میتونید برای راحتی کار هم میتونید از ویدئوی آموزشی هم استفاده بکنید.

فیلم آموزشی