در طراحی رابط کاربری مدرن، یکی از الگوهای پرکاربرد برای نمایش منوها، فیلترها یا سبد خرید، Off Canvas است. این اصطلاح به بخشی از رابط گفته میشود که در حالت عادی خارج از محدوده دید کاربر (Canvas) قرار دارد و با یک اکشن مثل کلیک یا سوایپ، وارد صفحه میشود.
📱 هدف از استفاده Off Canvas
هدف اصلی این الگو، استفاده بهینه از فضای صفحه، بهخصوص در نمایشگرهای کوچکتر (مثل موبایل) است.
به جای اینکه تمام گزینهها همیشه روی صفحه باشند، Off Canvas به کاربر اجازه میدهد فقط وقتی نیاز دارد، آن بخش را ببیند.
مثلاً:
منوی ناوبری در نسخه موبایل سایت
فیلتر محصولات در فروشگاه اینترنتی
سبد خرید در فروشگاهها
پنل تنظیمات سریع در داشبوردها
⚙️ نحوه عملکرد
در حالت کلی، Off Canvas با دو عنصر اصلی ساخته میشود:
پنل مخفی (Sidebar Hidden)
این بخش خارج از محدوده دید کاربر قرار دارد (مثلاً left: -300px; یا transform: translateX(-100%)).
دکمه فعالسازی (Trigger Button)
معمولاً آیکون منو یا دکمهای با عملکرد “باز/بسته کردن” است.
وقتی کاربر روی این دکمه کلیک میکند، با استفاده از JavaScript یا CSS transition، پنل به داخل صفحه حرکت میکند.
🧩 ویژگیهای مهم Off Canvas
واکنشگرایی (Responsive):
در دسکتاپ میتونه ثابت باشه (مثلاً در سمت چپ)، ولی در موبایل به صورت اسلایدی نمایش داده بشه.
انیمیشن نرم:
حرکت روان در ورود و خروج باعث حس طبیعیتر و حرفهایتر رابط میشود.
پشتیبانی از پسزمینه تار (Backdrop):
وقتی منو باز است، با تار کردن پسزمینه، تمرکز کاربر روی منو افزایش پیدا میکند.
دسترسیپذیری (Accessibility):
باید امکان بستن منو با دکمه Escape یا کلیک روی بیرون آن وجود داشته باشد.
🎨 کاربرد در المنتور و وردپرس
در المنتور یا سایر صفحهسازها، Off Canvas معمولاً بهصورت یک ویجت یا ماژول آماده در دسترس است.
مثلاً در المنتور پرو یا افزونههایی مثل “Elementor Header Footer Builder”، میتوان برای نسخه موبایل منوی Off Canvas طراحی کرد که در دسکتاپ به صورت منوی معمولی نمایش داده شود.
ویژگیهای کلیدی در این ماژولها معمولاً شامل:
تنظیم موقعیت (چپ / راست / پایین)
تعیین انیمیشن ورود
تعیین فاصله از کنارهها
اضافه کردن Overlay پسزمینه
گزینه “Close on Click Outside”
✅ مزایای استفاده از Off Canvas
بهبود تجربه کاربری در موبایل
طراحی تمیزتر و مینیمالتر
کاهش حواسپرتی کاربر
انعطافپذیری بالا در طراحی رابط
جمعبندی
ماژول Off Canvas یکی از مهمترین ابزارها برای طراحی رابطهای مینیمال و واکنشگرا است.
با استفاده درست از آن، میتوان تجربه کاربری را بهطرز چشمگیری بهبود داد، بدون اینکه فضای صفحه را شلوغ کرد.
این قابلیت المنتور فوق العادس
بسیار عالی و کاربردی بود
بسیار مفید بود
بسیار عالی
مقاله بسیار مفیدی هست