ساخت منوی همبرگری در المنتور
ساخت منوی همبرگری در المنتور :
کاربرد منوی همبرگری چیه ؟ ساخت منوی همبرگری در المنتور سخته ؟ برای ساخت منوی همبرگری در المنتور افزونه جانبی لازمه ؟ آیا میشه بدون افزونه جانبی کاری کنیم دکمه ی منوی همبرگری ما انیمیشن داشته باشه ؟
توی این مقاله میخوایم بدون افزونه جانبی و فقط با کمک چند خط کد (کدها رو انتهای این مقاله توی باکس دانلود براتون قرار دادیم) یه منوی همبرگری که دکمه همبرگری اون انیمیشن داشته باشه رو بسازیم پس تا انتهای این مقاله مارو همراهی کنید.
کاربرد منوی همبرگری چیه ؟
گاهی اوقات وقتی که داریم یه سایت رو توی وردپرس و با صفحه ساز المنتور طراحی میکنیم، وقتی به قسمت ریسپانسیو یا همون طراحی توی سایز موبایل و دستگاه های دیگه میرسیم نمیتونیم از همون منویی که برای سایز دسکتاپ استفاده کردیم برای سایز موبایل هم استفاده کنیم.
خب قاعدتا منوی سایز دسکتاپ بزرگتره و توی ردیف بلندتری قرار گرفته و اگه همون منو بیاد توی سایز موبایل، هم از لحاظ طراحی و هم از لحاظ زیبایی خیلی جالب از آب در نمیاد !
اینجاست که میتونیم برای سایز موبایل و دستگاه های کوچیکتر از منوی همبرگری استفاده کنیم که هم برای سایزهای کوچیکتر مناسب تره و هم زیبایی خاصی به طرح هدر وبسایت ما میده. آموزش ساخت منوی همبرگری در المنتور رو توی این مقاله خواهیم داشت.
برای ساخت منوی همبرگری در المنتور، اگر بخواید که زیر منویی که بعد از کلیک کردن روی دکمه همبرگری باز میشه بصورت عمودی باز بشه به هیچ افزونه ی جانبی نیاز ندارید و منوی همبرگری که توی خود المنتور تعریف شده این قابلیت رو داره.
ساخت افکت انیمیشنی دکمه منوی همبرگری توی المنتور
باز و بسته شدن انیمیشنی دکمه منوی همبرگری در المنتور
برای اینکه دکمه منوی همبرگری سایت شما موقع باز و بسته شدن انیمیشن داشته باشه و موقعی که منو باز هست آیکون اون عوض بشه و به حالت ضربدر دربیاد افزونه هایی هستن که این قابلیت رو به شما میدن اما لازم نیست برای همچین تغییر کوچیکی برید و افزونه نصب کنید در صورتی که چند خط کد ساده کار شما رو راه میندازه!
استفاده از ویجت 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; }
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
دمت گرم خیلی دنبالش بودم
خوشحالیم که مورد استفاده قرار گرفت
سلام کدها رو پیدا نکردم من لطفا راهنمایی کنید
سلام قسمت انتهایی مقاله قرار داره دوست عزیز