طراحی تب‌منو با CSS

تب‌منوها (tabs) یکی از الگوهای رایج رابط کاربری هستند که به کاربران اجازه می‌دهند مجموعه‌ای از محتواها را در یک فضای فشرده و سازمان‌یافته مرور کنند. طراحی تب‌منو با CSS می‌تواند ساده و سبک باشد یا پیشرفته و دسترس‌پذیر، بسته به نیاز پروژه. در این مقاله روش‌های عملی، نکات دسترس‌پذیری، و نمونه‌های قابل اجرا را بررسی می‌کنیم.

چرا تب‌منو اهمیت دارد؟

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

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

• استفاده از JavaScript برای کنترل کلاس‌ها و وضعیت‌ها (پویاترین و انعطاف‌پذیرترین روش).
• روش CSS-only با استفاده از :target (مناسب برای لینک‌های جدا) یا input[type=”radio”] + label (کمک به دسترس‌پذیری و بدون JS).
• الگوهای ترکیبی که دسترس‌پذیری و تعویض کیبورد را با JS تقویت می‌کنند.

نمونه ساده و قابل اجرا — CSS-only با radio inputs

<!-- HTML -->
<div class="tabs">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1">تب اول</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2">تب دوم</label>
  <input type="radio" id="tab3" name="tab">
  <label for="tab3">تب سوم</label>

  <section class="content" aria-hidden="false">
    <div class="panel">محتوای تب اول</div>
    <div class="panel">محتوای تب دوم</div>
    <div class="panel">محتوای تب سوم</div>
  </section>
</div>

<!-- CSS -->
.tabs input { display: none; }
.tabs label {
  display: inline-block;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tabs input:checked + label {
  border-bottom-color: #007bff;
  font-weight: bold;
}
.tabs .panel { display: none; padding: 16px; }
#tab1:checked ~ .content .panel:nth-of-type(1),
#tab2:checked ~ .content .panel:nth-of-type(2),
#tab3:checked ~ .content .panel:nth-of-type(3) {
  display: block;
}

این کد یک پیاده‌سازی ساده‌ی تب‌ها با استفاده از input[type=”radio”] و label است. انتخاب هر label با checked شدن input مربوطه موجب نمایش پنل متناظر می‌شود. چون از تگ‌های فرم استفاده شده، تب‌ها با کلید Tab قابل دسترسی هستند و برای پروژه‌های کوچک بدون نیاز به JavaScript مناسب است. نکته: ساختار HTML در مثال برای خوانایی کوتاه شده؛ در پروژه واقعی از ویژگی‌های ARIA برای بهبود دسترس‌پذیری استفاده کنید.

توضیحات تکمیلی و بهبودها

مزیت این روش این است که بدون JS کار می‌کند و حالت انتخاب‌شده بین بارگذاری صفحه حفظ نمی‌شود مگر از کوکی یا URL استفاده شود. معایب: مدیریت کلیدهای جهت‌نما (Arrow keys) معمولاً نیاز به JS دارد و همچنین ساختار DOM باید دقیق باشد تا CSS کار کند.

نمونه حرفه‌ای با دسترس‌پذیری بهتر (ARIA + JS کمکی)

<!-- HTML snippet -->
<div role="tablist" aria-label="نمونه تب">
  <button role="tab" aria-selected="true" id="t1" aria-controls="panel1">تب 1</button>
  <button role="tab" aria-selected="false" id="t2" aria-controls="panel2">تب 2</button>
  <button role="tab" aria-selected="false" id="t3" aria-controls="panel3">تب 3</button>
</div>
<div id="panel1" role="tabpanel" aria-labelledby="t1">محتوا 1</div>
<div id="panel2" role="tabpanel" aria-labelledby="t2" hidden>محتوا 2</div>
<div id="panel3" role="tabpanel" aria-labelledby="t3" hidden>محتوا 3</div>

/* CSS */[role="tablist"] { display:flex; gap:8px; }
[role="tab"][aria-selected="true"] { border-bottom:2px solid #0057e7; font-weight:600; }
[role="tabpanel"] { padding:12px; border:1px solid #e5e5e5; margin-top:8px; }

در این الگو از نقش‌های ARIA استفاده شده تا صفحه‌خوان‌ها و ابزارهای کمکی بتوانند ساختار تب‌ها را تشخیص دهند. با افزودن JS ساده می‌توان مدیریت کلیدهای جهت‌نما (ArrowLeft/Right) و تنظیم aria-selected و hidden را انجام داد. اگرچه JS در این بلاک ذکر نشده، اما ترکیب ARIA و CSS موجب بهبود قابل توجهی در دسترس‌پذیری می‌شود.

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

نکات طراحی و بهینه‌سازی برای تولید

• استفاده از رنگ و کنتراست مناسب برای وضعیت فعال و غیرفعال.
• پشتیبانی از صفحه‌کلید: حداقل Tab، و ترجیحاً Arrow navigation.
• افزودن نقش‌های ARIA: role=”tablist”, role=”tab”, role=”tabpanel” و استفاده از aria-selected، aria-controls، aria-labelledby.
• واکنش‌گرایی: در نمایش‌های کوچک تب‌ها می‌توانند به منوی کشویی تبدیل شوند یا به صورت اسکرولی نمایش داده شوند.
• تحلیل عملکرد: از CSS ساده و کم‌حجم استفاده کنید؛ تصاویر یا فونت‌های سنگین را برای تب‌ها بارگزاری نکنید.

جمع‌بندی و پیشنهادات عملی

طراحی تب‌منو با CSS می‌تواند از یک الگوی ساده بدون JS تا یک کامپوننت پیشرفته و قابل‌دسترس متغیر باشد. برای پروژه‌های کوچک از الگوی radio-based استفاده کنید و برای محصولات حرفه‌ای حتماً ARIA و مدیریت کلیدهای کیبورد را به کمک JavaScript اضافه کنید. همیشه تست با صفحه‌خوان و تست‌های واکنش‌گرایی را در چرخه توسعه قرار دهید.

در صورت نیاز می‌توان نمونه‌های بیشتری از تب‌های عمودی، تب‌های با آیکون، یا تب‌های قابل کشیدن (swipe) برای موبایل ارائه کرد.

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

ارسال