ریسپانسیو کردن مگا منو در ادان جت منو المنتور

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

در مطلب قبلی ساخت مگا منو در جت منو براتون توضیح دادم که چطوری مگا منوهای زیبا بسازین.

با توجه به اینکه در حال حاضر اکثر افراد سایتها رو با گوشیهاشون چک میکنن بر ما واجبه که سایتهامونو برای گوشیها ریسپانسیو کنیم. در این مطلب میخوام نحوه ریسپانسیو کردن منوی سایت در جت منو رو توضیح بدم.

ساخت مگا منوی ریسپانسیو

گام اول: تنظیمات منوی موبایل

دو روش برای ساخت مگامنوی ریسپانسیو داریم:

از داشبورد وردپرس
از ویرایشگر المنتور

اول بریم سراغ روش اول از داشبورد وردپرس.

گام دوم: تنظیمات جت منو از وردپرس

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

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

اولین بخش، بخش تنظیماته. اینجا میتونین طرح، موقعیت کانتینر، نمای اصلی تلفن همراه، محتوای موارد قبل و بعد رو انتخاب کنین.

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

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

در بخش سوم، میتونین استایلهای Container رو تغییر بدین. به عنوان مثال، رنگ دکمه بستن / برگشت و اندازه آیکون، رنگ متن بریدکرامبز، رنگ تقسیم کننده، اندازه آیکون و حتی تایپوگرافی متن.

علاوه بر این، تنظیمات استانداردی مانند عرض، رنگ پس زمینه، تنظیمات حاشیه محتوا، سایه کادر، پدینگ و شعاع هم موجوده.

در بخش چهارم هم استایلهای آیتم رو داریم. در این قسمت میتونین تنظیمات حالتهای نرمال و فعال رو برای منوی موبایل انتخاب کنین. میتونین رنگ برچسب و تنظیمات تایپوگرافی رو تغییر بدین، توضیحات آیتم رو نشون بدین و تقسیم کننده آیتم رو فعال کنبن.

همچنین میتونین آیکنهای آیتمها رو فعال کنین و ظاهرشون رو تغییر بدین.

همچنین تنظیمات استایل برای استایلهای آیکن زیرمنو مانند آیکن، رنگ و اندازه هم موجوده.

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

گام سوم: تنظیمات ریسپانسیو مگا منو در المنتور

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

اجازه بدین اول به بخش طرح موبایل بریم. این تنظیمات مشابه تنظیمات موجود در JetMenu داشبورده، اما اگه میخواین تغییرات رو همون لحظه ببینی بهتره منو رو در ویرایشگر المنتور شخصی سازی کنین.

در بخش Style میتونین تنظیمات مختلفی رو برای دسک تاپ و موبایل انتخاب کنین. همانطور که مشاهده میکنین، تنظیمات استایل برای تلفن همراه مثل داشبورده.

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