طراحی منوی پاپ آپ با CSS

منوی پاپ‌آپ (Popup Menu) یکی از اجزای متداول در طراحی رابط کاربری است: منوهای حساب کاربری، فهرست‌های زمینه‌ای (context menu)، گزینه‌های هر سطر در جدول و … . در این مقاله به روش‌های طراحی منوی پاپ‌آپ با CSS می‌پردازیم، نکات دسترسی (accessibility)، تجربه کاربری در موبایل، بهینه‌سازی عملکرد و نمونه‌های قابل استفاده را بررسی می‌کنیم.

چرا از CSS برای منوی پاپ‌آپ استفاده کنیم؟

• سادگی و نگهداری آسان: با چند قانون CSS می‌توان ساختار ظاهری و انیمیشن را کنترل کرد.
• کارایی: با استفاده از transform و opacity، می‌توان انیمیشن‌های روان و کم‌هزینه ایجاد کرد.
• قابلیت ترکیب با JavaScript: برای کنترل رفتار پیچیده‌تر می‌توان CSS را با JS ترکیب کرد.

نمونه پایه: منوی پاپ‌آپ فقط با CSS و :focus-within

<div class="menu">
  <button class="menu-btn" aria-haspopup="true" aria-expanded="false">Menu</button>
  <ul class="menu-list" role="menu">
    <li role="menuitem"><a href="#">Profile</a></li>
    <li role="menuitem"><a href="#">Settings</a></li>
    <li role="menuitem"><a href="#">Logout</a></li>
  </ul>
</div>

/* CSS */.menu { position: relative; display: inline-block; }
.menu-list {
  position: absolute; top: 100%; right: 0;
  margin: 8px 0; padding: 8px 0;
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  min-width: 160px;
}
.menu:focus-within .menu-list,
.menu:hover .menu-list {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu-list li { list-style: none; }
.menu-list a {
  display: block; padding: 8px 16px; color: #222; text-decoration: none;
}
.menu-list a:hover { background: #f5f5f5; }

توضیح: این مثال یک ساختار ساده HTML و CSS نشان می‌دهد که چگونه با استفاده از :focus-within و :hover منو باز می‌شود. از transform برای حرکت عمودی استفاده شده تا انیمیشن روان و کم‌هزینه باشد. همچنین aria attributes پایه‌ای قرار داده شده‌اند؛ اما این نمونه برای دسترسی کامل نیاز به بهبود دارد.

نکات دسترسی و ارتقاء: چرا CSS فقط کافی نیست

• صفحه‌خوان‌ها نیاز دارند که aria-expanded به‌روزرسانی شود.
• پشتیبانی از صفحه‌کلید (Escape برای بستن، کلیدهای جهت جهت‌یابی) با CSS محقق نمی‌شود.
• در موبایل، :hover وجود ندارد و باید لمس را مدیریت کرد.

نسخه پیشرفته با JavaScript برای دسترسی بهتر

// HTML: همان ساختار قبلی
const btn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu-list');

btn.addEventListener('click', (e) => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!expanded));
  if (!expanded) {
    menu.querySelector('a').focus();
  } else {
    btn.focus();
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    btn.setAttribute('aria-expanded', 'false');
    btn.focus();
  }
});

// کلیک بیرون برای بستن
document.addEventListener('click', (e) => {
  if (!document.querySelector('.menu').contains(e.target)) {
    btn.setAttribute('aria-expanded', 'false');
  }
});

توضیح: در این اسکریپت ساده، با کلیک روی دکمه aria-expanded تغییر می‌کند و تمرکز (focus) به اولین آیتم منو منتقل می‌شود. با کلید Escape منو بسته و فوکوس به دکمه بازمی‌گردد. همچنین کلیک بیرون منو باعث بسته شدن آن می‌شود. این الگو پایه‌ای اما موثر برای بهبود دسترسی است.

بهینه‌سازی‌های عملکرد و تجربه کاربری

• برای انیمیشن از transform و opacity استفاده کنید؛ از تغییر مستقیم top/left پرهیز کنید تا ریل‌تایم CPU کم‌تری مصرف شود.
• از will-change با احتیاط استفاده کنید و تنها برای عناصر مشخص اعمال کنید.
• با media query برای موبایل رفتار منو را تغییر دهید — مثلاً منو به صورت full-screen sheet نمایش داده شود.
• از prefers-reduced-motion برای خاموش کردن انیمیشن‌ها برای کاربرانی که حرکت را محدود کرده‌اند استفاده کنید.

نمونه بهینه‌شده CSS برای انیمیشن و کاهش Repaint

.menu-list {
  will-change: transform, opacity;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .menu-list { transition: none; }
}

توضیح: will-change به مرورگر می‌گوید که این خصوصیات تغییر خواهند کرد؛ در نتیجه مرورگر می‌تواند بهینه‌سازی‌های لازم را انجام دهد. همچنین با prefers-reduced-motion امکان غیرفعال کردن انیمیشن برای کاربران حساس فراهم شده است.

مقایسه روش‌ها

قابلیت‌های پیشرفته و حالات واقعی استفاده

• Context Menu: باز شدن منو در موقعیت موس یا لمس — از پوزیشن absolute با محاسبه JS استفاده کنید تا از خارج صفحه نیفتد.
• Action Menu در ردیف‌های جدول: منوهای کوچک با گزینه‌های سریع مثل ویرایش/حذف — نگهداری فاصله و جلوگیری از پوشاندن محتوای اصلی مهم است.
• Profile/Account Menu: لیست گزینه‌ها همراه با تفکیک منطقی (divider) و وضعیت‌های loader برای درخواست‌های async.

نمونه: بهبود پوزیشن برای اجتناب از overflow

// Pseudo-JS to flip menu if overflowing
function positionMenu(btn, menu) {
  const rect = btn.getBoundingClientRect();
  const menuHeight = menu.offsetHeight;
  const viewportHeight = window.innerHeight;
  if (rect.bottom + menuHeight > viewportHeight) {
    menu.style.top = 'auto';
    menu.style.bottom = '100%';
  } else {
    menu.style.top = '100%';
    menu.style.bottom = 'auto';
  }
}

توضیح: این کد کوتاه محل نمایش منو را بسته به فضای موجود در صفحه تنظیم می‌کند تا منو از دید کاربر خارج نشود. در پروژه‌های بزرگ‌تر از کتابخانه‌هایی مثل Popper.js استفاده کنید که جزئیات بیشتری مانند collision و offset را مدیریت می‌کنند.

نتیجه‌گیری و بهترین شیوه‌ها

• برای منوهای ساده از CSS-only استفاده کنید اما برای دسترسی و موبایل حتماً JS اضافه کنید.
• انیمیشن‌ها را با transform و opacity انجام دهید و از prefers-reduced-motion پشتیبانی کنید.
• aria attributes، مدیریت فوکوس و کلیدهای صفحه‌کلید را جدی بگیرید.
• در پروژه‌های پیچیده از کتابخانه‌های حرفه‌ای برای پوزیشنینگ استفاده کنید.

با رعایت این نکات می‌توانید منوهای پاپ‌آپ سریع، دسترس‌پذیر و خوش‌تجربه طراحی کنید که در دسکتاپ و موبایل عملکرد مناسبی داشته باشند.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال