آموزش گام به گام طراحی مگا منو (Mega Menu) مدرن با CSS و HTML

مقدمه؛ مگا منو (Mega Menu) چیست و چه کاربردی دارد؟

در وب‌سایت‌های بزرگ با تعداد دسته‌بندی‌های زیاد (مانند دیجی‌کالا یا وب‌سایت‌های شرکتی بزرگ)، منوهای کشویی ساده یا همان Dropdown دیگر پاسخگوی نیاز کاربران نیستند. در این حالت از مگا منو (Mega Menu) استفاده می‌شود. مگا منو یک منوی بازشوی عریض است که اطلاعات را در قالب چندین ستون، همراه با تصویر، لینک و حتی بنرهای تبلیغاتی نمایش می‌دهد تا تجربه کاربری (UX) بهتری ایجاد کند.

در این مقاله آموزشی قصد داریم بدون استفاده از کتابخانه‌های سنگین یا جاوااسکریپت، یک مگا منوی بی‌نظیر و مدرن را با استفاده از تکنولوژی قدرتمند CSS Grid و Flexbox پیاده‌سازی کنیم.

مرحله اول: ساختار استخوان‌بندی منو با HTML

ابتدا باید ساختار درختی کدهای HTML هدر و منو را تعریف کنیم. کلید ساخت یک مگا منوی واکنش‌گرا این است که هدر والد دارای موقعیت نسبی (relative) بوده و مگا منوی داخلی در حالت مطلق (absolute) نسبت به نوار اصلی تراز شود.

به نحوه قرارگیری بخش مگا منو درون آیتم منوی محصولات دقت کنید:

< nav class="navbar" >
  < div class="container" >
    < div class="logo" >وب‌کرافت< / div >
    < ul class="nav-links" >
      < li >< a href="#" >خانه< / a >< / li >
      < li class="mega-dropdown" >
        < a href="#" class="dropbtn" >خدمات ما < span class="arrow" >▼< / span >< / a >
        < div class="mega-menu" >
          < div class="mega-content" >
            < div class="mega-column" >
              < h3 >طراحی وب< / h3 >
              < a href="#" >طراحی سایت فروشگاهی< / a >
              < a href="#" >سایت شرکتی< / a >
              < a href="#" >پورتفولیو شخصی< / a >
            < / div >
            < div class="mega-column" >
              < h3 >سئو و بهینه‌سازی< / h3 >
              < a href="#" >سئو داخلی< / a >
              < a href="#" >سئو خارجی< / a >
              < a href="#" >آنالیز کلمات کلیدی< / a >
            < / div >
            < div class="mega-column" >
              < h3 >بازاریابی< / h3 >
              < a href="#" >تبلیغات کلیکی< / a >
              < a href="#" >مدیریت شبکه‌های اجتماعی< / a >
              < a href="#" >تولید محتوا< / a >
            < / div >
          < / div >
        < / div >
      < / li >
      < li >< a href="#" >درباره ما< / a >< / li >
    < / ul >
  < / div >
< / nav >

مرحله دوم: استایل‌دهی نوار ناوبری اصلی (Navbar)

در این بخش، کدهای پایه CSS برای مرتب‌سازی نوار هدر را اضافه می‌کنیم. با استفاده از display: flex آیتم‌های منو را در یک خط تراز می‌کنیم.

.navbar {
  background-color: #1e1b4b;
  position: relative;
  z-index: 1000;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links > li > a {
  display: block;
  color: #e2e8f0;
  padding: 24px 18px;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s;
}

مرحله سوم: جادوی قرارگیری مگا منو با CSS Grid

برای اینکه مگا منو کل عرض صفحه را بپوشاند، کلاس .mega-dropdown را که والد مگا منو است با position: static مقداردهی می‌کنیم و خود مگا منو را با position: absolute قرار می‌دهیم. بدین ترتیب مگا منو به جای محدود شدن به عرض دکمه والد، تمام پهنای هدر را در بر می‌گیرد:

.mega-dropdown {
  position: static !important;
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-top: 3px solid #38bdf8;
  padding: 30px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s ease-in-out;
}

/* نمایش مگا منو در حالت هوور */
.mega-dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

حالا برای چیدمان ستون‌های داخلی مگا منو از قدرت CSS Grid استفاده می‌کنیم تا ستون‌ها به شکلی کاملاً منظم و شیک نمایش داده شوند:

.mega-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.mega-column h3 {
  font-size: 16px;
  color: #1e1b4b;
  margin-bottom: 15px;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 8px;
}

.mega-column a {
  display: block;
  color: #64748b;
  text-decoration: none;
  padding: 8px 0;
  font-size: 14px;
  transition: all 0.2s;
}

.mega-column a:hover {
  color: #38bdf8;
  padding-right: 5px;
}

نتیجه‌گیری

دیدید؟ ساخت یک مگا منوی بسیار پیشرفته و زیبا نیاز به کتابخانه‌های سنگین جاوااسکریپت ندارد. با به کارگیری درست مفاهیم تراز بندی مطلق (Absolute Navigation)، سیستم‌های مدرن CSS Grid و استفاده صحیح از ترنزیشن‌ها (Transitions)، می‌توانید منوهای شیک، کاربرپسند و بهینه برای سئو خلق کنید.

پیشنمایش