ساخت دکمه منوی شناور با CSS — راهنمای جامع

دکمه منوی شناور (Floating Action Button یا FAB) یکی از اجزای متداول در طراحی رابط کاربری مدرن است. این دکمه در صفحه شناور می‌ماند و معمولاً برای عمل‌های اصلی یا نمایش منوی سریع استفاده می‌شود. در این مقاله به روش ساخت دکمه منوی شناور با CSS می‌پردازیم، همراه با نمونه کد، نکات دسترسی، بهینه‌سازی‌های عملکردی و چند حالت متداول.

چرا از دکمه منوی شناور استفاده کنیم؟

• دسترسی سریع به عمل‌های مهم (مثلاً ایجاد آیتم جدید، تماس فوری)
• اشغال فضای کم از رابط و حفظ تمرکز کاربران
• قابلیت شخصی‌سازی بالا با CSS و انیمیشن‌ها

ساختار پایه HTML

<!-- Floating Action Button Structure -->
<div class="fab-container">
  <button class="fab" aria-expanded="false" aria-controls="fab-menu" aria-label="Open menu">
    <span class="fab-icon">+</span>
  </button>
  <ul id="fab-menu" class="fab-menu" hidden>
    <li><a href="#new" class="fab-item">New</a></li>
    <li><a href="#search" class="fab-item">Search</a></li>
    <li><a href="#settings" class="fab-item">Settings</a></li>
  </ul>
</div>

توضیح: ساختار شامل یک دکمه اصلی با کلاس fab و یک لیست منوی پنهان است. استفاده از aria-expanded، aria-controls و attribute hidden برای دسترسی (accessibility) ضروری است.

CSS پایه برای ظاهر و مکان‌یابی

/* Basic FAB styles */.fab-container { position: fixed; right: 20px; bottom: 20px; z-index: 1000; }
.fab {
  width: 56px; height: 56px; border-radius: 50%;
  background: #ff4081; color: #fff; border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fab:active { transform: scale(0.96); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.fab-menu {
  list-style: none; margin: 0; padding: 0;
  position: absolute; right: 0; bottom: 70px;
  display: flex; flex-direction: column; gap: 10px;
}
.fab-item {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; color: #333; padding: 8px 12px;
  border-radius: 6px; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform-origin: right center; opacity: 0; transform: translateY(8px) scale(0.96);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* When menu is shown (JS toggles .open on container) */.fab-container.open .fab-menu .fab-item { opacity: 1; transform: translateY(0) scale(1); }

توضیح: این CSS موقعیت‌دهی fixed برای شناوری در گوشه صفحه را فراهم می‌کند. از transform برای حرکت و scale استفاده شده تا انیمیشن‌ها روان و GPU-accelerated باشند؛ این باعث کاهش repaint و بهبود عملکرد می‌شود.

تغییر وضعیت با JavaScript (پایه‌ای و امن)

document.addEventListener('click', function(e) {
  const container = document.querySelector('.fab-container');
  const fab = container.querySelector('.fab');
  const menu = container.querySelector('#fab-menu');
  if (fab.contains(e.target)) {
    const open = container.classList.toggle('open');
    fab.setAttribute('aria-expanded', open);
    if (open) menu.removeAttribute('hidden'); else menu.setAttribute('hidden', '');
  } else {
    // کلیک خارج: بسته شدن منو
    if (container.classList.contains('open')) {
      container.classList.remove('open');
      fab.setAttribute('aria-expanded', 'false');
      menu.setAttribute('hidden', '');
    }
  }
});

توضیح: این اسکریپت ساده روی کلیک‌ها گوش می‌دهد و منو را باز/بسته می‌کند. توجه کنید که به‌هنگام باز شدن، attribute hidden حذف می‌شود تا خواننده‌های صفحه (screen readers) منو را تشخیص دهند. همچنین کلیک خارج باعث بستن منو می‌شود تا تجربه کاربری بهتر گردد.

بهینه‌سازی و نکات پیشرفته

• از transform و opacity برای انیمیشن استفاده کنید تا repaint کمتر و برنامه روان‌تر باشد.
• برای مواقعی که کاربر prefers-reduced-motion را فعال کرده، انیمیشن‌ها را غیرفعال کنید.
• برای ریسپانسیو: در صفحه‌های کوچک ارتفاع و فاصله را کاهش دهید یا منو را به بالای صفحه ببرید.
• استفاده از tabindex و focus styles برای کاربرانی که با کیبورد ناوبری می‌کنند.

@media (prefers-reduced-motion: reduce) {
  .fab, .fab-item { transition: none !important; animation: none !important; }
}

توضیح: این قطعه CSS از سیستم عامل کاربر پیروی می‌کند و انیمیشن‌ها را در صورت درخواست غیرفعال می‌سازد—یک نکته مهم برای دسترسی.

نسخه بهینه‌شده با دسترسی بهتر و کنترل کیبورد

/* Focus-visible for keyboard users */.fab:focus-visible { outline: 3px solid rgba(255,64,129,0.25); outline-offset: 3px; }

/* Ensure menu items focusable */.fab-item { outline: none; }
.fab-item:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }

توضیح: styles بالا کمک می‌کند تا هنگام استفاده با کیبورد، حالت فوکوس واضح و قابل تشخیص باشد. همچنین هر آیتم منو باید با Tab قابل دسترسی باشد (اگر از anchor استفاده می‌کنید، به طور پیش‌فرض فوکوس پذیر هستند).

نمونه حالات و سناریوهای استفاده

• اپلیکیشن موبایل: دکمه ایجاد سریع (New Post) در گوشه پایین صفحه
• وب‌سایت فروشگاهی: دکمه تماس سریع یا مشاهده سبد خرید
• داشبورد مدیریتی: باز کردن منوی ابزارهای سریع (Export، Filter، Add)

مقایسه مختصر پوزیشن‌ها

نکات نهایی و توصیه‌های حرفه‌ای

• از رنگ و کنتراست مناسب برای خوانایی آیکون استفاده کنید.
• اگر آیتم‌های منو زیاد هستند، از پن یا modal به‌جای فهرست شناور استفاده کنید.
• برای صرفه‌جویی در منابع، فقط زمانی که کاربر نیاز دارد منو را رندر یا آنیمیت کنید (lazy render).
• آزمایش روی صفحات و دستگاه‌های مختلف برای اطمینان از اینکه منو با محتوای صفحه تداخل ندارد.

با ترکیب CSS مدرن، توجه به دسترسی و رفتار مناسب در موبایل، می‌توانید دکمه منوی شناوری بسازید که هم چشم‌نواز و هم کاربردی باشد. در مثال‌های بالا روش پایه‌ای و چند بهینه‌سازی ضروری پوشش داده شد که می‌تواند نقطه شروعی برای سفارشی‌سازی‌های بیشتر باشد.

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

ارسال