طراحی منوی کشویی چند سطحی با CSS

منوی کشویی چندسطحی (multi-level dropdown) جزو اجزای رایج در طراحی وب است. در این مقاله به صورت گام‌به‌گام با روش‌های ساخت منوهای چندسطحی فقط با CSS آشنا می‌شوید، نکات دسترسی (accessibility)، واکنش‌گرایی و بهینه‌سازی عملکرد را می‌خوانید و چند مثال عملی و قابل استفاده دریافت می‌کنید.

چرا منوی کشویی چندسطحی مهم است؟

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

اصول پایه و ساختار HTML

ساختار معمولی یک منوی چندسطحی با تگ‌های <ul> و <li> ساخته می‌شود و زیرمنوها به‌صورت تو در تو قرار می‌گیرند. رعایت دسترسی با استفاده از نقش‌ها (roles) و ویژگی‌های ARIA هم توصیه می‌شود.

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="has-sub">
      <a href="#">Services</a>
      <ul class="submenu">
        <li><a href="#">Design</a></li>
        <li class="has-sub">
          <a href="#">Development</a>
          <ul class="submenu">
            <li><a href="#">Frontend</a></li>
            <li><a href="#">Backend</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

این ساختار پایه به شما اجازه می‌دهد چندین سطح از زیرمنوها را ایجاد کنید. کلاس‌های کمکی مانند has-sub و submenu برای استایل‌دهی مفید هستند.

نمونه ساده با :hover و CSS پایه

/* Basic styles */.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { position: relative; }
.menu a { display: block; padding: 10px 15px; text-decoration: none; }

/* Hide submenus */.menu .submenu { display: none; position: absolute; top: 100%; left: 0; }

/* Show on hover */.menu li:hover > .submenu { display: block; }

/* Second-level positioning */.menu .submenu .submenu { left: 100%; top: 0; }

این کد نشان می‌دهد چگونه با استفاده از :hover زیرمنوها را نمایش دهیم. نکته: این روش روی دستگاه‌های لمسی یا برای کاربرانی که از کیبورد استفاده می‌کنند کامل نیست.

بهبود دسترسی با :focus-within و تعامل کیبورد

/* Use focus-within to support keyboard navigation */.menu li:focus-within > .submenu,
.menu li:hover > .submenu {
  display: block;
}

/* Add basic focus styles */.menu a:focus { outline: 2px solid #007acc; }

استفاده از :focus-within باعث می‌شود زمانی که کاربر با کلید Tab وارد آیتم می‌شود زیرمنو باز شود و امکان پیمایش با کیبورد فراهم گردد. همچنین اضافه کردن استایل فوکوس قابل مشاهده برای کاربران صفحه‌خوان و کیبورد ضروری است.

منوی واکنش‌گرا با تکنیک CSS-only (checkbox hack)

<nav class="mobile-menu">
  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle">Menu</label>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <input type="checkbox" id="services-toggle" />
      <label for="services-toggle">Services</label>
      <ul class="submenu">
        <li><a href="#">Design</a></li>
        <li><a href="#">Development</a></li>
      </ul>
    </li>
  </ul>
</nav>

/* CSS */.mobile-menu .submenu { display: none; }
#services-toggle:checked + label + .submenu { display: block; }
#menu-toggle:checked + label + ul { display: block; }

در این مثال از ورودی‌های نوع checkbox برای کنترل باز و بسته شدن منو در موبایل استفاده شده است. این روش بدون جاوااسکریپت کار می‌کند و مناسب حالت‌هایی است که می‌خواهیم رفتار کلیک-محور روی دستگاه‌های لمسی داشته باشیم. اما باید هنگام استفاده به مسائل دسترسی و خوانایی اشاره‌گرها توجه کنیم.

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

• انیمیشن و انتقال‌ها: استفاده از transform و opacity بهتر از تغییر display است زیرا روان‌تر و با عملکرد بهتر اجرا می‌شود (مثلاً از visibility و transform: translateY).
• موقعیت‌دهی: برای جلوگیری از برون‌ریزی منو از صفحه، با JS یا CSS متنی می‌توان موقعیت را برحسب اندازه صفحه تغییر داد، اما CSS خالص محدودیت‌هایی دارد.
• قابلیت دسترسی: اضافه کردن aria-haspopup، aria-expanded و roles کمک می‌کند تا صفحه‌خوان‌ها منو را بهتر بفهمند (در صورت امکانات JS بهتر مدیریت شود).
• ریسپانسیو: برای موبایل از منوی همبرگری یا تکنیک checkbox استفاده کنید تا لمس کردن ساده باشد.
• پرفرمنس: از استفاده بیش از حد سلکتورهای پیچیده در منوهای بزرگ خودداری کنید.

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

مثال کامل‌تر: نمایش با transition و visibility

.menu .submenu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

.menu li:hover > .submenu,
.menu li:focus-within > .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

در این نسخه از visibility و opacity به‌همراه transform استفاده شده تا انیمیشن نرم‌تری داشته باشیم و در عین حال از مشکلات flicker در تغییر display جلوگیری شود. این الگو برای منوهای پیچیده و با زیرمنوهای متعدد مناسب است.

نتیجه‌گیری و توصیه‌های نهایی

منوی کشویی چندسطحی با CSS ممکن و کاربردی است، اما برای تجربه کاربری و دسترسی کامل باید از تکنیک‌های ترکیبی استفاده کرد: :hover برای دسکتاپ، :focus-within برای کیبورد، و checkbox یا جاوااسکریپت برای کنترل بهتر در موبایل. همیشه عملکرد و دسترسی را آزمایش کنید و برای منوهای بسیار پیچیده از ترکیب CSS و JS استفاده نمایید.

اگر نمونه کد عملی یا طراحی اختصاصی نیاز دارید، می‌توانم یک نسخه کامل با استایل‌های دقیق و تنظیمات واکنش‌گرا برای پروژه‌تان آماده کنم.

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

ارسال