ساخت منوهای چندسطحی (Mega Menu) با انیمیشن‌های روان CSS

🗺️ نقشه راه: ساخت مگا منو از صفر تا صد

🌟

فهم مگا منو

چی هست و چرا لازمه؟

🏗️

بستر HTML

اسکلت‌بندی و ساختار معنایی.

🎨

استایلینگ CSS

رنگ و لعاب، موقعیت‌دهی.

✨

انیمیشن‌های روان

ترنزیشن‌ها و ترنسفورم‌ها.

📱

واکنش‌گرایی کامل

موبایل، تبلت، دسکتاپ، تی‌وی.

✅

نکات پیشرفته

دسترسی‌پذیری، عیب‌یابی.

مگا منو چیه و چرا باید ازش استفاده کنیم؟

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

استفاده از مگا منو مخصوصاً برای سایت‌های بزرگ با محتوای زیاد مثل فروشگاه‌های اینترنتی، پورتال‌های خبری یا وبلاگ‌های جامع، یه نجات‌دهنده‌ست. به جای اینکه کاربر برای پیدا کردن یه محصول یا دسته‌بندی خاص، ده بار کلیک کنه و از این صفحه به اون صفحه بپره، همه‌چیز رو جلوی چشمش داره. این یعنی افزایش تجربه کاربری (UX) و کاهش نرخ پرش (Bounce Rate)، که برای سئو و رتبه سایتت توی گوگل حیاتیه. فراموش نکن که گوگل عاشق سایت‌هایی هست که کاربر توش حس راحتی و سرعت داره.
اگه دنبال ابزارهای بیشتر برای بهینه‌سازی وب‌سایتت هستی، حتماً یه سری به
صفحه اصلی fa-tools.ir
بزن.

برنامه‌ریزی برای ساختار مگا منوی ایده‌آل

قبل از اینکه بزنیم به دل کد، یه برنامه‌ریزی درست و حسابی لازمه. مگا منو هر چقدر هم که بزرگ باشه، باید سازماندهی شده و منطقی باشه. فکر کن قراره یه فروشگاه بزرگ بسازی، بدون نقشه و طرح اولیه که نمیشه!

۱. دسته‌بندی و سلسله‌مراتب محتوا

• منوهای اصلی: این‌ها آیتم‌هایی هستند که کاربر اول از همه می‌بینه‌. مثلاً “محصولات”، “خدمات”، “مقالات”.
• زیرمنوهای دسته‌بندی: وقتی روی منوی اصلی نگه می‌داری، زیرمنوهای بزرگ‌تر ظاهر می‌شن. مثلاً برای “محصولات” می‌تونه شامل “لوازم الکترونیکی”، “پوشاک”، “کتاب” و… باشه.
• جزئیات (اختیاری): داخل هر زیرمنو، ممکنه یه سری لینک‌های جزئی‌تر یا حتی بنرهای تبلیغاتی کوچیک داشته باشی.

۲. طراحی بصری و تجربه کاربری

• خوانایی: از فونت‌های مناسب و اندازه‌های خوانا استفاده کن. کنتراست رنگی بین متن و پس‌زمینه رو حتماً رعایت کن.
• فضای خالی: شلوغی دشمن مگا منوی خوبه. به المان‌ها فضای تنفس بده.
• پیکان‌ها و آیکون‌ها: برای نشون دادن اینکه یه آیتم زیرمنو داره، از آیکون‌های کوچیک (مثل فلش) استفاده کن.

اسکلت‌بندی با HTML: ساختار معنایی مگا منو

HTML بیس و پایه کار ماست. برای یه مگا منوی درست و حسابی، باید یه ساختار معنایی و تو در تو بسازیم که هم مرورگرها خوب بفهمنش و هم بعداً CSS و JavaScript بتونن راحت باهاش کار کنن. معمولاً از تگ <nav> برای بخش ناوبری اصلی و بعدش لیست‌های نامرتب <ul> و آیتم‌های <li> استفاده می‌کنیم.

<nav class="main-nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#">صفحه اصلی</a>
        </li>
        <li class="nav-item has-submenu">
            <a href="#">محصولات</a>
            <div class="mega-menu">
                <div class="mega-menu-column">
                    <h3>الکترونیک</h3>
                    <ul>
                        <li><a href="#">موبایل</a></li>
                        <li><a href="#">لپ‌تاپ</a></li>
                        <li><a href="#">دوربین</a></li>
                        <li><a href="#">لوازم جانبی</a></li>
                    </ul>
                </div>
                <div class="mega-menu-column">
                    <h3>پوشاک</h3>
                    <ul>
                        <li><a href="#">مردانه</a></li>
                        <li><a href="#">زنانه</a></li>
                        <li><a href="#">بچه گانه</a></li>
                    </ul>
                </div>
                <div class="mega-menu-column">
                    <h3>کتاب</h3>
                    <ul>
                        <li><a href="#">رمان</a></li>
                        <li><a href="#">علمی</a></li>
                        <li><a href="#">تاریخی</a></li>
                    </ul>
                </div>
                <div class="mega-menu-column promo-banner">
                    <img src="https://via.placeholder.com/200x150" alt="پیشنهاد ویژه">
                    <p>پیشنهادهای ویژه ما را از دست ندهید!</p>
                    <a href="https://fa-tools.ir/shop/" style="color: #007BFF; text-decoration: none; font-weight: bold;">مشاهده فروشگاه</a>
                </div>
            </div>
        </li>
        <li class="nav-item has-submenu">
            <a href="#">خدمات</a>
            <div class="mega-menu">
                <div class="mega-menu-column">
                    <h3>وب</h3>
                    <ul>
                        <li><a href="#">طراحی سایت</a></li>
                        <li><a href="#">سئو</a></li>
                        <li><a href="#">پشتیبانی</a></li>
                    </ul>
                </div>
                <div class="mega-menu-column">
                    <h3>گرافیک</h3>
                    <ul>
                        <li><a href="#">طراحی لوگو</a></li>
                        <li><a href="#">بنر</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="nav-item">
            <a href="https://fa-tools.ir/contact/">تماس با ما</a>
        </li>
    </ul>
</nav>

استایلینگ با CSS: زیباتر کردن مگا منو

حالا که اسکلت کار رو چیدیم، وقتشه با CSS بهش جون بدیم و زیباش کنیم. بخش زیادی از جذابیت مگا منو به استایلینگ درست و حسابی برمی‌گرده. از مخفی کردن زیرمنوها شروع می‌کنیم و بعداً با hover یا focus اون‌ها رو نشون می‌دیم.

مخفی کردن زیرمنو و موقعیت‌دهی

اول از همه، زیرمنوهای ما باید به صورت پیش‌فرض مخفی باشن. وقتی کاربر روی آیتم اصلی موس رو نگه داشت، اون‌ها رو نمایش می‌دیم. از position: absolute; برای جدا کردن زیرمنو از جریان عادی سند و opacity: 0; و visibility: hidden; برای مخفی کردن استفاده می‌کنیم تا بتونیم با transition انیمیشن‌های نرمی رو ایجاد کنیم.

/* عمومی */
body {
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl; /* برای فارسی */
    text-align: right; /* برای فارسی */
}

.main-nav {
    background-color: #334155;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    display: block;
    padding: 15px 20px;
    color: #F7FAFC;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-item > a:hover {
    background-color: #4A5568;
    color: #CBD5E0;
}

/* استایل مگا منو */
.mega-menu {
    position: absolute;
    right: 0; /* برای rtl */
    top: 100%;
    width: 100%; /* میتونه به صورت دلخواه تنظیم بشه */
    max-width: 960px; /* حداکثر عرض مگا منو */
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* فاصله بین ستون‌ها */
    z-index: 1000;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* برای انیمیشن ورود */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    pointer-events: none; /* جلوگیری از تعامل قبل از نمایش کامل */
}

.nav-item.has-submenu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-menu-column {
    flex: 1 1 200px; /* برای سه ستون، حدود 300px */
    min-width: 180px; /* حداقل عرض برای هر ستون */
}

.mega-menu-column h3 {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.3em;
    color: #1E3A8A;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #BFDBFE;
}

.mega-menu-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-column ul li a {
    display: block;
    padding: 8px 0;
    color: #334155;
    text-decoration: none;
    transition: color 0.2s ease, padding-right 0.2s ease;
}

.mega-menu-column ul li a:hover {
    color: #007BFF;
    padding-right: 5px; /* افکت کوچک هنگام هاور */
}

.promo-banner {
    background-color: #E0F7FA;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.promo-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.promo-banner p {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.9em;
    color: #007BFF;
    margin: 0 0 10px 0;
}

انیمیشن‌های روان CSS: مگا منو را زنده کن!

انیمیشن‌ها واقعاً تجربه کاربری رو متحول می‌کنن. به جای اینکه مگا منو یهو ظاهر بشه و یه شوک به کاربر بده، با یه انیمیشن نرم، حس مدرن و حرفه‌ای بودن رو به سایتت تزریق می‌کنی. از ویژگی transition برای این کار استفاده می‌کنیم.

افزودن transition برای ورود و خروج نرم

توی کد CSS قبلی، دیدی که از transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s; استفاده کردیم. این خط کد به ما میگه که تغییرات روی opacity (شفافیت)، transform (موقعیت) و visibility رو در مدت ۰.۴ ثانیه و با یه منحنی سرعت ease انجام بده. همین کافیه تا مگا منو به جای پریدن یهویی، به آرامی از بالا به پایین بیاد و شفافیتش بیشتر بشه.

واکنش‌گرایی کامل: مگا منو برای همه دستگاه‌ها

تو دنیای امروز، یه وب‌سایت بدون واکنش‌گرایی، مثل یه ماشین بدون چرخ می‌مونه! مگا منو هم باید روی هر دستگاهی از موبایل و تبلت گرفته تا لپ‌تاپ و حتی تلویزیون‌های هوشمند، عالی به نظر برسه و کار کنه. اینجاست که Media Queries به کمکمون میان.

طراحی موبایل‌فرست (Mobile-First Design)

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

/* استایل‌های پایه برای موبایل (پیش‌فرض) */
.nav-list {
    flex-direction: column; /* در موبایل لیست‌ها زیر هم باشند */
    align-items: center;
}

.nav-item {
    width: 100%;
    text-align: center;
}

.nav-item > a {
    padding: 12px 0;
}

.mega-menu {
    position: static; /* در موبایل به صورت عادی در جریان قرار گیرد */
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: none;
    padding: 10px;
    background-color: #F8FAFC; /* پس‌زمینه متفاوت در موبایل */
    opacity: 1; /* در موبایل همیشه شفاف */
    visibility: visible; /* در موبایل همیشه قابل مشاهده (مخفی شدن با JS انجام میشه) */
    transform: translateY(0);
    transition: none;
    display: none; /* پیش‌فرض مخفی، با کلیک نمایش داده شود (نیاز به JS) */
}

.mega-menu-column {
    flex: 1 1 100%; /* ستون‌ها در موبایل زیر هم */
    margin-bottom: 15px;
}

.mega-menu-column h3 {
    background-color: #E2E8F0;
    padding: 8px;
    border-radius: 5px;
}

/* تبلت (عرض حداقل 768px) */
@media (min-width: 768px) {
    .nav-list {
        flex-direction: row; /* در تبلت و بالاتر، لیست‌ها کنار هم */
    }

    .nav-item {
        width: auto;
    }

    .mega-menu {
        right: auto;
        left: 50%; /* وسط‌چین کردن مگا منو */
        transform: translateX(-50%) translateY(20px); /* تنظیم مجدد ترنسفورم */
        width: calc(100% - 40px); /* برای padding اطراف */
        max-width: 960px; /* حداکثر عرض در تبلت */
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        border: 1px solid #E2E8F0;
        background-color: #FFFFFF;
        display: flex; /* بازگشت به فلکس برای نمایش ستونی */
    }

    .nav-item.has-submenu:hover .mega-menu {
        transform: translateX(-50%) translateY(0);
    }
}

/* لپ‌تاپ و دسکتاپ (عرض حداقل 1024px) */
@media (min-width: 1024px) {
    .mega-menu {
        max-width: 1200px; /* حداکثر عرض بزرگتر */
        left: 50%;
        transform: translateX(-50%) translateY(20px);
    }
}

/* تلویزیون و مانیتورهای بزرگ (عرض حداقل 1440px) */
@media (min-width: 1440px) {
    .mega-menu {
        max-width: 1400px; /* برای نمایشگرهای خیلی بزرگ */
    }
}

دسترسی‌پذیری و بهینه‌سازی (Accessibility & Optimization)

یه مگا منوی خوب فقط نباید خوشگل باشه، بلکه باید برای همه کاربرا، حتی اونایی که محدودیت‌های فیزیکی دارن یا از کیبورد برای ناوبری استفاده می‌کنن، قابل استفاده باشه. این بخش رو دست کم نگیر، چون بخشی از سئو تکنیکال و فاکتورهای رتبه‌بندی گوگل هم بهش مربوطه.

نقش ARIA و ناوبری با کیبورد

• aria-haspopup="true": این ویژگی رو به آیتم‌های منوی اصلی که زیرمنو دارن اضافه کن. به نرم‌افزارهای خواننده صفحه (Screen Reader) میگه که این آیتم یه پاپ‌آپ داره.
• aria-expanded="true/false": این رو به صورت پویا با JavaScript تغییر بده. وقتی زیرمنو بازه true و وقتی بسته‌ست false.
• ناوبری با کیبورد: اطمینان حاصل کن که کاربر می‌تونه با کلیدهای Tab، Shift+Tab، Esc و جهت‌ها در منو حرکت کنه و اون رو باز و بسته کنه. این بخش حتماً به JavaScript نیاز داره.

جدول مقایسه‌ای: روش‌های پیاده‌سازی مگا منو

برای اینکه دید بهتری نسبت به روش‌های مختلف ساخت مگا منو داشته باشی، یه جدول مقایسه‌ای سریع آماده کردم.

عیب‌یابی سریع (Troubleshooting) مگا منو

تو مسیر کدنویسی همیشه ممکنه به مشکلاتی بربخوری. نگران نباش، این طبیعیه! اینجا چند تا از مشکلات رایج و راه‌حل‌هاشون رو با هم مرور می‌کنیم:

مشکل ۱: مگا منو اصلا نمایش داده نمیشه!

راه‌حل:

• z-index: مطمئن شو که z-index مگا منو (مثلاً ۱۰۰۰) از المان‌های زیرش بیشتره.
• position: والد (item اصلی که .has-submenu داره) باید position: relative; داشته باشه تا position: absolute; زیرمنو نسبت به اون عمل کنه.
• اشتباه تایپی: کلاس‌ها یا IDها رو دقیق بررسی کن. یه غلط املایی کوچک می‌تونه کل کار رو بهم بریزه.
• overflow والد: اگر والد مگا منو overflow: hidden; داشته باشه، ممکنه زیرمنو رو قطع کنه.

مشکل ۲: انیمیشن‌ها لگ دارن یا خوب اجرا نمیشن!

راه‌حل:

• فقط transform و opacity: برای روان‌ترین انیمیشن‌ها، سعی کن فقط این دو ویژگی رو انیمیت کنی، چون مرورگرها برای این‌ها از GPU استفاده می‌کنن. انیمیشن روی height یا width می‌تونه باعث لگ بشه.
• پرهیز از انیمیشن روی display: هیچ وقت روی display: none; انیمیشن نده. از visibility و opacity استفاده کن.
• will-change: اگر انیمیشن هنوز لگ داره، می‌تونی به المنت will-change: transform, opacity; رو اضافه کنی تا مرورگر خودش رو برای تغییر این ویژگی‌ها آماده کنه. (با احتیاط استفاده کن).

مشکل ۳: واکنش‌گرایی در موبایل و تبلت درست نیست!

راه‌حل:

• viewport متا تگ: حتماً این تگ رو تو <head> سایتت داشته باشی:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

• تست روی دستگاه واقعی: شبیه‌سازهای مرورگر خوبن، اما همیشه روی دستگاه واقعی (موبایل، تبلت) هم تست کن تا مطمئن شی همه چیز خوب کار میکنه.
• position: static; در موبایل: زیرمنوهای مگا رو در حالت موبایل به position: static; تغییر بده تا به صورت عادی زیر آیتم والدش قرار بگیره و با display: none/block; (با کمک JS) باز و بسته بشه.
• تنظیم عرض mega-menu: حواست باشه که عرض مگا منو در حالت موبایل 100% باشه و max-width نداشته باشه.

سوالات متداول (FAQ Schema)

ساخت منوهای چندسطحی (Mega Menu) با انیمیشن‌های روان CSS

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

۱. مگا منو چیست و چرا برای سئو و تجربه کاربری حیاتی است؟

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

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

۲. ساختار HTML مگا منو؛ پی‌ریزی یک بنای مستحکم

قبل از اینکه سراغ رنگ و لعاب و انیمیشن برویم، باید یک ساختار تمیز، استاندارد و معنایی (Semantic) در HTML پیاده کنیم. استفاده از تگ‌های مناسب نه تنها به سئو کمک می‌کند، بلکه کار مرورگرها و ابزارهای صفحه‌خوان را نیز آسان می‌سازد.

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

<!-- ساختار کلی منو اصلی -->
<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item"><a href="#" class="nav-link">صفحه اصلی</a></li>
    
    <!-- آیتم دارای مگا منو -->
    <li class="nav-item has-megamenu">
      <a href="#" class="nav-link">محصولات ویژه</a>
      
      <!-- پنل اصلی مگا منو -->
      <div class="mega-menu">
        <div class="mega-menu-content">
          <div class="mega-menu-column">
            <h4>کالای دیجیتال</h4>
            <ul>
              <li><a href="#">گوشی موبایل</a></li>
              <li><a href="#">لپ‌تاپ و تبلت</a></li>
              <li><a href="#">ساعت هوشمند</a></li>
            </ul>
          </div>
          <div class="mega-menu-column">
            <h4>خانه و آشپزخانه</h4>
            <ul>
              <li><a href="#">لوازم برقی</a></li>
              <li><a href="#">ظروف و ابزار</a></li>
              <li><a href="#">دکوراسیون داخلی</a></li>
            </ul>
          </div>
          <div class="mega-menu-column">
            <h4>مد و پوشاک</h4>
            <ul>
              <li><a href="#">لباس مردانه</a></li>
              <li><a href="#">لباس زنانه</a></li>
              <li><a href="#">کیف و کفش</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    
    <li class="nav-item"><a href="#" class="nav-link">درباره ما</a></li>
  </ul>
</nav>

۳. جادوی CSS؛ استایل‌دهی و رسپانسیو کردن مگا منو

یک مگا منوی خوب باید به صورت تمام‌عرض (Full-width) یا حداقل متناسب با عرض کانتینر اصلی سایت باز شود. برای پیاده‌سازی این حالت، والد مگا منو (یعنی تگ .has-megamenu) باید موقعیت نسبی داشته باشد، اما خود پنل مگا منو باید با position: absolute قرار گیرد.

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

/* استایل‌های پایه منوبار */
.navbar {
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 0 20px;
  position: relative;
  font-family: Vazirmatn, sans-serif;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative; /* بسیار مهم برای موقعیت‌دهی مگا منو */
}

.nav-link {
  display: block;
  padding: 20px 15px;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #3b82f6;
}

/* استایل بدنه اصلی مگا منو */
.mega-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100vw; /* عرض کامل مرورگر */
  max-width: 1200px;
  background-color: #ffffff;
  border-top: 3px solid #3b82f6;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 999;
  
  /* مخفی کردن پیش‌فرض برای انیمیشن */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* شبکه ستونی داخل مگا منو */
.mega-menu-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 30px;
}

.mega-menu-column h4 {
  color: #1e293b;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
}

.mega-menu-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.mega-menu-column ul li a:hover {
  color: #3b82f6;
  padding-right: 5px; /* افکت جابجایی جزئی هنگام هاور */
}

۴. انیمیشن‌های روان CSS؛ تزریق روح به کالبد منو

یکی از اشتباهات رایج در ساخت منوهای کشویی، استفاده ناگهانی از دستور display: none به display: block است. مشکل کجاست؟ ویژگی display قابلیت انیمیشن‌پذیری ندارد و منو به صورت لحظه‌ای و خشن باز می‌شود.

برای حل این مسئله، ما از تلفیق سه ویژگی طلایی استفاده کردیم:

1. Opacity: تغییر شفافیت منو از صفر به یک.
2. Visibility: کمک به دسترسی‌پذیری و غیرفعال کردن کلیک بر روی لینک‌های منوی مخفی.
3. Transform (TranslateY): یک افکت حرکتی از پایین به بالا که حس سبکی و شناور بودن به منو می‌دهد.

۵. بهبود دسترسی‌پذیری و کنترل با جاوااسکریپت

اگرچه سی‌اس‌اس به تنهایی کارهای خارق‌العاده‌ای انجام می‌دهد، اما برای دستگاه‌های لمسی (موبایل و تبلت) هاور کردن معنایی ندارد. به علاوه، رعایت دسترسی‌پذیریی با دکمه‌های کیبورد (مانند دکمه Tab) نیاز مبرم به جاوااسکریپت دارد.

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

// کدی ساده برای مدیریت کلیک منو در موبایل
document.addEventListener("DOMContentLoaded", function () {
  const hasMegaMenu = document.querySelector(".has-megamenu");

  hasMegaMenu.addEventListener("click", function (e) {
    if (window.innerWidth < 992) {
      e.preventDefault(); // جلوگیری از باز شدن لینک اصلی در اولین کلیک موبایل
      this.classList.toggle("active-menu");
      
      const menuPanel = this.querySelector(".mega-menu");
      if (menuPanel.style.visibility === "visible") {
        menuPanel.style.opacity = "0";
        menuPanel.style.visibility = "hidden";
        menuPanel.style.transform = "translateY(15px)";
      } else {
        menuPanel.style.opacity = "1";
        menuPanel.style.visibility = "visible";
        menuPanel.style.transform = "translateY(0)";
      }
    }
  });
});

۶. مقایسه روش‌های نمایش مگا منو (جدول کاربردی)

برای انتخاب بهترین استراتژی نمایش مگا منو در پروژه‌های مختلف، جدول مقایسه‌ای زیر به شما در تصمیم‌گیری بهتر کمک خواهد کرد:

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

۷. عیب‌یابی سریع و رفع مشکلات رایج (Troubleshooting)

۸. سوالات متداول کاربران