ساخت منو موبایل با ویجت جدید المنتور (off canvas)

[@sina_samiipour]

document.addEventListener('DOMContentLoaded', () => {
const offCanvas = document.querySelector('.e-off-canvas');
const hamburger = document.querySelector('.hamburger');
if (offCanvas && hamburger) {
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') {
if (offCanvas.getAttribute('aria-hidden') === 'false') {
hamburger.classList.add('is-active');
} else {
hamburger.classList.remove('is-active');
}
}
}
});
observer.observe(offCanvas, {
attributes: true,
});
}
});
.elementor-widget-off-canvas {
z-index: 99998;
position: absolute;
}
.hamburger{
padding: 8px;
background-color: transparent;
transform: scale(1);
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.5s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
border: 0;
margin: 0;
overflow: visible;
z-index: 99999;
position: relative;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger:focus:not(:focus-visible) {
outline: none;
}
.hamburger-box {
width: 40px;
height: 24px;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 3px;
/* تغییر رنگ منو همبرگری */
background-color:#313131;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.2s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
/* تغییر رنگ منو ضربدر برای حالت بستن*/
background-color: #313131;
}
.hamburger--slider .hamburger-inner {
top: 2px;
}
.hamburger--slider .hamburger-inner::before {
top: 10px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s; }
.hamburger--slider .hamburger-inner::after {
top: 20px;
}
.hamburger--slider.is-active .hamburger-inner {
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--slider.is-active .hamburger-inner::before {
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
opacity: 0; }
.hamburger--slider.is-active .hamburger-inner::after {
transform: translate3d(0, -20px, 0) rotate(-90deg); }

[@naghshedel]

چقدر مفید و سریع و کامل توضیح دادین دم شماگرم عالی بود

[@Wares_hashimi]

بسیار عالی❤❤ nice

[@sina_samiipour]

ممنونم 😍

[@mehrdaddelfaribi4179]

عالی بود ❤

[@WordPress-y2u]

درود و براووو.. من مخپاستم بدونم که چگونه میتوانم تاریخ میلادی و شمسی را زیر صفحات پستی ( بعنوان متا) نشون داد. حالاا با جاوا اسکریپت و یا اقزونه.. ممنون میشم اگر یه مثال توی ویدئوهاتون بگذارید..

[@mahdimusaviii]

خیلی عالی بود فقط یه مشکلی هست اینکه چطور میشه اون لینک بلند رو کوتاهش کرد همون لینکی که از روی اون دکمه کپی کردید و گذاشتینش تو کد ها html راهی داره کوتاه بشه اگه هست ممنون میشم راهنماییم کنید

[@mehdi2284]

خیلی غالی ممنون

[@pooriajeyhani2763]

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

[@zankohamzah6949]

خسته نباشید تونسخه 3.22.2 نیست این المان

[@user-lb4tz8ts3x]

عالی بود
ساده و روان توضیح دادید
کد html را کجا پیدا کنیم

[@sina_samiipour]

خوشحالم که دوست داشتید. 😍
توی کامنت اول پین کردمش.