آموزش ساخت منوی دراپ‌داون در CSS

ساخت منوی دراپ‌داون یا همان منوی کشویی در وب‌سایت‌ها، یکی از قابلیت‌های جذاب و کاربردی در طراحی رابط کاربری است. این منوها به کاربران اجازه می‌دهند که با کلیک بر روی گزینه‌ای، لیستی از زیر گزینه‌ها را ببینند که ارتباط مستقیمی با گزینه منتخب دارند. در این آموزش، نحوه ساخت منوی دراپ‌داون را با استفاده از CSS به شما نشان خواهیم داد. ساخت چنین منوهایی به استفاده مناسب از استایل‌دهی و برخی از ویژگی‌های CSS نظیر :hover و display بستگی دارد.

برای ساخت یک منوی دراپ‌داون ساده، ابتدا ساختار HTML را ایجاد می‌کنیم. این ساختار شامل یک لیست غیر مرتب (unordered list) می‌شود که هر آیتم از لیست، می‌تواند حاوی یک منوی فرعی باشد. با کمک CSS، این منوها را به صورت مخفی نگه داشته و به هنگام نیاز نمایش می‌دهیم. استفاده از ویژگی position در CSS کمک می‌کند تا منوها در مکان درست خود نمایش داده شوند.

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

در ادامه مثالی از منوی دراپ‌داون آورده شده است. این مثال شامل یک منو با آیتم‌های اصلی و زیرمنوهایی است که به هنگام حرکت موس بر روی آن‌ها نمایش داده می‌شوند. همچنین به کدهای لازم CSS برای استایل‌دهی این منو خواهیم پرداخت.

<style>
  ul {
    list-style-type: none;
  }
  li {
    display: inline-block;
    position: relative;
  }
  li ul {
    display: none;
    position: absolute;
    top: 100%;
  }
  li:hover ul {
    display: block;
  }
</style>
<ul>
  <li>Menu Item 1
    <ul>
      <li>Sub Menu 1</li>
      <li>Sub Menu 2</li>
    </ul>
  </li>
  <li>Menu Item 2</li>
</ul>

توضیحات کد منوی دراپ‌داون