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

رفیق برنامه‌نویس، تا حالا شده بخوای یه منوی navigation خفن بسازی که هم کاربردی باشه و هم زیبایی سایت رو چند برابر کنه؟ یه منویی که هزار تا لینک و دسته بندی توش جا بشه، اما شلوغ و درهم برهم به نظر نرسه؟ دقیقاً داریم در مورد «مگا منو» حرف می‌زنیم! اگه دنبال راه حلی هستی که بتونی با کدنویسی تمیز و انیمیشن‌های CSS، تجربه‌ای بی‌نظیر برای کاربرات خلق کنی، جای درستی اومدی.
اینجا قراره قدم به قدم یاد بگیریم چطور یه مگا منوی پویا، زیبا و کاملاً واکنش‌گرا بسازیم.

آماده‌ای ابزارهای خفن و کدهای آماده‌ای که کارت رو راه میندازه ببینی؟

همین الان بزن بریم به فروشگاه ابزارها و کدهای آماده!

اگر سوالی داشتی یا نیاز به راهنمایی بیشتر، می‌تونی با تیم فنی ما تماس بگیری:
۰۹۲۰۲۲۳۲۷۸۹
یا به صفحه
تماس با ما
سر بزنی.

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

💡 نکته کلیدی: هرچند که مگا منو برای نمایش حجم زیادی از محتواست، اما همیشه سعی کن “کمتر، بیشتر است” رو به یاد داشته باشی. فقط اطلاعات ضروری و پرکاربرد رو نمایش بده.

📄 نمونه کد HTML برای ساختار پایه مگا منو:
[کپی کد]

<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:
[کپی کد]

/* عمومی */
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;
}

✨ نکات تکمیلی برای انیمیشن:

• تایمینگ (Timing): زمان 0.3 تا 0.5 ثانیه معمولاً برای اکثر انیمیشن‌های منو مناسبه. زمان‌های کوتاه‌تر ممکنه تند و تیز به نظر برسن و زمان‌های طولانی‌تر کند و خسته‌کننده.
• منحنی‌های سرعت (Timing Functions):
  • ease: شروع و پایان نرم، وسط تند.
  • ease-in: شروع آرام، بعد تند میشه.
  • ease-out: شروع تند، بعد آرام میشه.
  • cubic-bezier(...): کنترل کامل روی منحنی سرعت برای افکت‌های خاص.
• تاخیر (Delay): می‌تونی برای نمایش زیرمنوها یه تاخیر کوچیک (مثلاً 0.1 ثانیه) بذاری تا کاربر فرصت کنه موس رو روی آیتم اصلی جابجا کنه بدون اینکه منو سریعاً باز و بسته بشه. این کار به افزایش “تحمل پذیری” منو کمک می‌کنه و بهش میگن “Mega Menu Deliberate Delay”.

📱 نمونه Media Queries برای واکنش‌گرایی:
[کپی کد]

/* استایل‌های پایه برای موبایل (پیش‌فرض) */
.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; /* برای نمایشگرهای خیلی بزرگ */
    }
}

⚠️ توجه: در حالت موبایل (و تا حدی تبلت)، بهتره مگا منو با “کلیک” باز و بسته بشه تا با “هاور” (نگه داشتن موس). برای این کار نیاز به چند خط JavaScript ساده داری که منو رو با اضافه و حذف کردن یه کلاس (مثلاً .is-active) کنترل کنه.

🚀 پیشنهاد: برای کدهای پیشرفته‌تر JavaScript که به دسترسی‌پذیری و کنترل موبایل کمک می‌کنن، می‌تونی به
بخش کدهای آماده و اسنیپت
سایت ما سر بزنی و از راه‌حل‌های بهینه استفاده کنی.

💡 یادت نره، ابزارهای توسعه مرورگر (Developer Tools) بهترین دوستت هستن برای عیب‌یابی. باهاشون کار کن و لایه‌های مختلف رو بررسی کن. برای
افزایش سرعت و بهینه‌سازی کدهای آماده
هم می‌تونی به فروشگاه ما سر بزنی.