ساخت منوی همبرگری با CSS — راهنمای جامع

منوی همبرگری (hamburger menu) یکی از اجزای متداول در طراحی رابط کاربری واکنش‌گراست. در این مقاله به صورت گام‌به‌گام، روش‌های پیاده‌سازی منوی همبرگری با CSS را بررسی می‌کنیم: از ساختار ساده HTML و تکنیک CSS-only تا نکات دسترسی، انیمیشن‌ها، و بهینه‌سازی برای حرکت کمتر.

چرا منوی همبرگری؟

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

روش‌های معمول پیاده‌سازی

• استفاده از checkbox + label (CSS-only)
• استفاده از عنصر button و کنترل با JavaScript برای وضعیت‌های پیچیده
• آموزش ترکیب با overlay، منوی کشویی و تبدیل آیکون به X

نمونه پایه: CSS-only با checkbox

<!-- HTML -->
<input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle" class="hamburger" aria-label="Toggle menu">
  <span></span>
  <span></span>
  <span></span>
</label>

<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

در این ساختار، یک checkbox مخفی داریم که وضعیت باز/بسته بودن منو را نگه می‌دارد. label مرتبط با آن به عنوان دکمه همبرگری عمل می‌کند. سه span برای خطوط آیکون استفاده شده‌اند.

/* CSS */.hamburger{ display:inline-block; cursor:pointer; width:36px; height:30px; position:relative; }
.hamburger span{
  position:absolute; left:0; right:0; height:4px; background:#333; border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.hamburger span:nth-child(1){ top:4px; }
.hamburger span:nth-child(2){ top:13px; }
.hamburger span:nth-child(3){ top:22px; }

#menu-toggle:checked + .hamburger span:nth-child(1){
  transform:translateY(9px) rotate(45deg);
}
#menu-toggle:checked + .hamburger span:nth-child(2){
  opacity:0;
}
#menu-toggle:checked + .hamburger span:nth-child(3){
  transform:translateY(-9px) rotate(-45deg);
}

/* simple nav */.nav{ display:none; }
#menu-toggle:checked ~ .nav{ display:block; }

این CSS خطوط را هنگام تیک زدن checkbox به شکل حرف X تبدیل کرده و منو را نمایش می‌دهد. استفاده از سلکتورهای خواهر (adjacent/sibling) امکان کنترل تنها با CSS را فراهم می‌کند.

توضیحات فنی و بهینه‌سازی

• سعی کنید اندازه دکمه حداقل 40×40 پیکسل برای لمس راحت باشد.
• برای دسترسی بهتر، از aria-label یا متن مخفی برای screen reader استفاده کنید.
• اگر نگران حرکت زیاد هستید، از prefers-reduced-motion پشتیبانی کنید.

/* Reduced motion support */@media (prefers-reduced-motion: reduce){
  .hamburger span{ transition:none; }
}

کد بالا تجربه برای کاربرانی که حرکت کم‌تر را ترجیح می‌دهند بهبود می‌بخشد و انیمیشن را حذف می‌کند.

منوی کشویی با overlay و انیمیشن نرم

برای تجربه بهتر موبایل، معمولاً منو به صورت اسلاید از سمت چپ یا راست ظاهر می‌شود و یک overlay نیمه‌شفاف پشت آن نمایش داده می‌شود.

/* slide-in nav */.nav{
  position:fixed; top:0; left:0; height:100%; width:260px;
  background:#fff; transform:translateX(-100%); transition:transform .35s ease;
  box-shadow:2px 0 8px rgba(0,0,0,.2); z-index:100;
}
#menu-toggle:checked ~ .nav{ transform:translateX(0); }

/* overlay */.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .35s ease; z-index:90;
}
#menu-toggle:checked ~ .overlay{ opacity:1; pointer-events:auto; }

این قسمت باعث می‌شود وقتی منو باز می‌شود، یک پوشش پشت منو ظاهر شود تا تمرکز کاربر بر روی منو قرار گیرد. از pointer-events برای غیرفعال کردن کلیک‌ها در حالت بسته استفاده شده است.

نکات دسترسی (Accessibility)

• بهتر است دکمه به‌جای checkbox استفاده شود و وضعیت با aria-expanded کنترل گردد.
• مطمئن شوید پس از باز شدن منو، فُکوس به اولین لینک منتقل می‌شود و کاربر با کلید Escape می‌تواند منو را ببندد.

// Optional: small JS to toggle aria-expanded and handle Escape
const btn = document.querySelector('.hamburger-btn');
const nav = document.querySelector('.nav');
btn.addEventListener('click', ()=>{
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!expanded));
  nav.classList.toggle('open');
});
document.addEventListener('keydown', (e)=>{
  if(e.key === 'Escape'){
    btn.setAttribute('aria-expanded','false');
    nav.classList.remove('open');
  }
});

این اسکریپت کوچک وضعیت aria-expanded را برای ابزارهای کمکی تنظیم و قابلیت بستن با Escape را اضافه می‌کند. ترکیب CSS و JS به شما کنترل بهتر و سازگاری بیشتر می‌دهد.

جدول خلاصه خواص مهم CSS

نکات حرفه‌ای و موارد کاربردی

• برای لینک‌های زیاد، از لیست دسته‌بندی‌شده در منو استفاده کنید تا پیمایش آسان‌تر شود.
• در صفحات دسکتاپ که فضای کافی دارید، با CSS Media Queries منو را به نوار افقی تبدیل کنید و از همبرگر تنها در موبایل استفاده کنید.
• آزمایش با رنگ کنتراست و اندازه فونت برای دسترسی بهتر ضروری است.
• در پروژه‌های پیچیده، از مدیریت حالت با JavaScript و aria-live برای اطلاع‌رسانی به کاربران صفحه‌خوان استفاده کنید.

نمونه نهایی: نکات جمع‌بندی

پیاده‌سازی منوی همبرگری با CSS امکان‌پذیر و سبک است. اگرچه روش‌های CSS-only ساده و بدون وابستگی هستند، اما ترکیب با JavaScript برای بهبود دسترسی و مدیریت فُکوس توصیه می‌شود. همیشه به موارد دسترسی، لمس‌پذیری، و پشتیبانی از prefers-reduced-motion توجه کنید تا تجربه کاربری روان و قابل‌دسترس بسازید.

در نهایت، بسته به نیاز پروژه می‌توانید پیاده‌سازی ساده‌ای با checkbox انجام دهید یا از دکمه همراه با جاوااسکریپت برای کنترل بهتر استفاده کنید. نمونه‌های کد بالا را می‌توانید به‌عنوان پایه در پروژه‌های خود به کار ببرید و با CSS سفارشی‌سازی ظاهری و انیمیشن‌ها را بهبود دهید.

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

ارسال