ساخت منوی همبرگری در المنتور

ساخت منوی همبرگری در المنتور :

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

کاربرد منوی همبرگری چیه ؟

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

دکمه انیمیشنی منوی همبرگری در المنتور-کنترل وب

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

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

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

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

استفاده از ویجت Nav menu

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

از قسمت منو (Menu) میتونید یکی از منوهایی که تو قسمت فهرست های سایتتون ساختید رو انتخاب کنید و اون منو رو به نمایش در بیارید. توی تب Mobile Dropdown گزینه ی Full Width رو اگر روشن کنید میتونید زیر منویی توی موبایل براتون باز میشه رو بصورت تمام عرض نشون بدید.

حالا برای اینکه مهم ترین بخش روی این منو یعنی همون انیمیشنی بودن دکمه همبرگری موقع باز و بسته شدن اجرا بشه : کافیه که کدهای css که انتهای این آموزش براتون قرار دادیم رو دانلود و بعد به تب پیشرفته این ویجت رفته و اونهارو داخل بخش Custom css یا همون سی اس اس سفارشی اضافه کنید.

نکته مهم :توی خط دوم کدها قسمت gap میتونید از این بخش فاصله ی بین هر کدوم از سه خط آیکون منوی همبرگری رو تنظیم کنید. توی خط سوم و چهارم این کدها هم میتونید ضخامت و طول خط های این منوی همبرگری رو مشخص و به سلیقه ی خودتون اونارو تنظیم کنید. حالا بعد از اینکه این کدهارو توی این بخش اعمال کنید میبینید که با کلیک کردن روی آیکون منوی همبرگری این آیکون با یه انیمیشن نرم تغییر شکل میده و به حالت ضربدر در میاد و بعد که دوباره بسته میشه با انیمیشن به حالت قبلی خودش بر میگرده و شکل همبرگری میگیره.

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

selector{
    --gap: 8px;
    --weight: 2px;
    --width: 30px;
}
selector .elementor-menu-toggle{
    position: relative;
}
selector .elementor-menu-toggle:before,
selector .elementor-menu-toggle:after,
selector .elementor-menu-toggle i:after{
    content: "";
    height: var(--weight);
    width: var(--width);
    position: absolute;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%,calc(-50% + var(--gap)));
    transition: all 0.3s ease-in-out;
}
selector .elementor-menu-toggle.elementor-active:before{
    transform: translate(-50%,-50%) rotate(-45deg);
}
selector .elementor-menu-toggle:after{
    transform: translate(-50%,calc(-50% - var(--gap)));
}
selector .elementor-menu-toggle.elementor-active:after{
    transform: translate(-50%,-50%) rotate(45deg);
}
selector .elementor-menu-toggle i:after{
    transform: translate(-50%,-50%);
}
selector .elementor-menu-toggle i:before,
selector .elementor-menu-toggle.elementor-active i:after{
    opacity: 0;
}

برای امتیاز به این نوشته کلیک کنید!

[کل: 17 میانگین: 4.4]

8 پاسخ

محسن گفت:
1401/10/05 در 14:28
دمت گرم خیلی دنبالش بودم
پاسخ
1. مدیریت گفت:
  1401/10/08 در 07:23
  خوشحالیم که مورد استفاده قرار گرفت
2. hamid47 گفت:
  1401/10/23 در 10:46
  سلام کدها رو پیدا نکردم من لطفا راهنمایی کنید
3. مدیریت گفت:
  1401/10/23 در 10:59
  سلام قسمت انتهایی مقاله قرار داره دوست عزیز
sinawebjo گفت:
1401/11/21 در 21:00
سلام
من از منوی همبرگری استفاده کردم که از کنار باز میشه
ولی موقع بسته شدن اگر روی اون قسمتی از صفحه سایت که جز منو نیست کلیک میکنم منو بسته نمیشه
و حتما باید روی علامت ضربدر اون بزنم تا بسته بشه برای این راهکاری هست یا کدی وجود داره؟
ممنون از سایت خوبتون
پاسخ
1. مدیریت گفت:
  1401/11/24 در 16:48
  سلام
  اگر از پاپ آپ استفاده کرده باشید توی تنظیمات پاپ اپ این آپشن وجود داره. اگر روی قالب باشید اکثر قالبها خودشون این امکان رو دارن و احتیاجی به نوشتن کد نیست.
/ گفت:
1402/12/22 در 18:04
متاسفانه کد هارو پیدا نمیکنم
پاسخ
1. مدیریت گفت:
  1402/12/22 در 18:21
  سلام دوست عزیز، کد ها رو در انتهای همین آموزش براتون قرار دادیم. الان میتونین استفاده کنین.