با کمک افزونه JetMenu میتونین براحتی منوی همبرگری ایجاد کنین و با استفاده از ابزارک Hamburger Menu منو رو به روشی فشرده در وب سایتتون نمایش بدین. این ابزارک به شما امکان میده تا منو رو روی دسک تاپ و موبایل در نمای تاگل نمایش بدین. علاوه بر این، شما میتونین منوهای مختلفی برای دسک تاپ و تلفن همراه ایجاد کنین. خب بیاید شروع کنیم!
آمادهسازی مگا منو
اول از همه شما باید یک مگا منو آماده کنین که ما در آموزش ساخت مگا منو با جت منو توضیح دادیم. بعد هم یکسری تنظیمات برای ریسانسیوی منو باید انجام دبین که در آموزش ریسپانسیو کردن مگا منو برای موبایل با جت منو توضیح دادیم.
ایجاد منوی همبرگری
بعد از ایجاد منو، یک هدر در المنتور بسازین و در ویرایش قالب اون هدر، ویجت منوی همبرگری از جت منو رو وارد کنین.
- گام اول: سفارشی سازی منوی همبرگری
حالا نگاهی به تنظیمات ویجت بندازیم. در بخش Options، منوی دسک تاپ و منوی تلفن همراه رو انتخاب کنین. میتونین یکسان انتخاب کنین یا متفاوت.
سپس ، طرح و موقعیت کانتینر رو انتخاب کنین. کانتینر چیه؟ همون کادر دور منو یعنی همون ظرف محتوا هم بهش میگن اصلا همون منو در نظر بگیرین.
همچنین، میتونین الگوی موارد قبل و الگوی موارد بعد رو اضافه کنین. برای الگوها میتونین از الگوهایی که قبلا در المنتور ذخیره کردین یا الگوی هدر و فوتر استفاده کنین.
همچنین در این قسمت میتونین نماد، نشان، توضیحات، تقسیم کننده و برید کرامبز رو هم فعال کنین.
بخش بعدی بخش محتواست. در این قسمت شما میتونین متن دکمه تاگل رو اضافه کنین. نماد حالتباز و بسته شدن رو هم از کتابخانه آیکون انتخاب کنین یا نماد شخصی خودتون رو در قالب SVG بارگذاری کنین.
علاوه بر این، میتونین متن برگشت به منو و نمادی هم برای کانتینر انتخاب کنین. گزینه های دیگه هم داریم مثلا آیکن زیر منو و تقسیم کننده برید کرامبز.
- گام دوم: استایلدهی به منو
پس از انجام سفارشی سازی منو، نوبت به استایلدهی به منو میرسه. برای تغییر شکل ظاهری تاگل، کانتینر و آیتمهای منو، از بخشهای مختلف استایلدهی استفاده کنین.
در تنظیمات قسمت پیشرفته همین استایل حتی میتونین رنگ لودر و رنگ جلد رو تغییر بدین.
- گام سوم: تست نتیجه منو
بعد از اینکه تمام سفارشی سازیها رو انجام دادین، وقتشه که منو رو مشاهده کنین.
تبریک میگم! حالا شما یاد گرفتین که یک منوی همبرگری زیبا و جمع و جور با ادان جت منوی المنتور برای موبایل و تبلت بسازین.
برای یک طراحی زیبا و بی دردسر کیت الگوی دیجیتال مارکتینگ المنتور ما رو بعنوان نمونه ببینین.
5 پاسخ
سلام وقت بخیر ببخشید من نیاز به یک کمک درمورد المنتور دارم ، من زمانی که منوی کشویی درست کردم این منو کشویی زیر مطالب (اسلایدر یا عکس ها قرار میگیره و دیده نمیشه ) و یک مشکل دیگه این هست که در نسخه موبایل زمانی که با مرورگر موبایل وارد سایت میشویم و آیکون منو روی میزنم روش منو باز نمیشه ممنون میشم راهنمایی کنید.
با سلام خدمت شما کاربر گرامی
برای راهنمایی بهتر این موضوع لطفا این پیام را به همراه تصویر در تلگرام پشتیبانی وب سایت ارسال نمایید تا همکاران ما در سریع ترین زمان ممکن مشکل شما را رفع کنند .
باتشکر از حضور شما
دوست عزیز بهش از طریق z index عدد بده، به ویجت یا ستون ،z index برای زمانی استفاده میشه که دو تا بخش روی هم افتاده باشه و بخوای بگی اولویت با کدام موضوع باشه
سلام و درود بر شما
مرسی واقعا آموزشتون عالی بود و همه مراحل انجام دادم اما متاسفانه هر کاری میکنم نمیتونم رنگ خود متن منو رو عوض کنم و بطور پیش فرض همون طور قرمز میمونه. لطفا کمکم کنید چون واقعا من به همبرگر منو نیاز دارم.
سلام و درود خدمت شما دوست عزیز 🙋♂️
به شما پیشنهاد میکنم این موردی که میفرمایید را به پشتیبانی سایت در تلگرام بفرمایید تا شما را راهنمایی کنند. 🧑💻
با تشکر از حضور شما. 🥰