آموزش ساخت مگا منوهای (Mega Menu) عریض و تمام‌صفحه با استفاده از CSS Grid

رفیق توسعه‌دهنده! تا حالا شده بخوای یه منوی بزرگ و کاربردی بسازی که هم شیک باشه و هم روی همه دستگاه‌ها عالی نمایش داده بشه؟ دقیقاً همینجا، با CSS Grid قراره بهت نشون بدم چطور میشه مگا منوهای عریض و تمام‌صفحه‌ای ساخت که نه تنها از نظر بصری خیره‌کننده باشن، بلکه از نظر عملکردی هم حرفه‌ای. بیا یه سر به ابزارهای فوق‌العاده Fa-Tools بزن، مطمئنم چیزای خفنی برای پروژه‌هات پیدا می‌کنی!
نیاز به مشاوره داری یا سوالی برات پیش اومده؟ هر وقت خواستی، روی این شماره بزن: 09202232789

نقشه راه ساخت مگا منو با CSS Grid 🗺️

ساختار HTML مگا منو

<!-- کپی کردن کد با یک کلیک -->
<nav class="main-nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#" class="nav-link">خانه</a>
        </li>
        <li class="nav-item has-mega-menu">
            <a href="#" class="nav-link">محصولات</a>
            <div class="mega-menu">
                <div class="mega-menu-inner">
                    <div class="mega-menu-section">
                        <h4 class="mega-menu-title">دسته‌بندی‌ها</h4>
                        <ul class="mega-menu-list">
                            <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-section">
                        <h4 class="mega-menu-title">برندها</h4>
                        <ul class="mega-menu-list">
                            <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-section">
                        <h4 class="mega-menu-title">پیشنهادات ویژه</h4>
                        <ul class="mega-menu-list">
                            <li><a href="#">تخفیفات روز</a></li>
                            <li><a href="#">جدیدترین‌ها</a></li>
                            <li><a href="#">پر فروش‌ها</a></li>
                        </ul>
                    </div>
                    <div class="mega-menu-section promo-banner">
                        <img src="promo-banner.jpg" alt="پیشنهاد ویژه" style="max-width: 100%; height: auto; display: block; border-radius: 5px;">
                        <p style="margin-top: 10px; font-weight: bold;">تا 50% تخفیف!

                        <a href="#" class="btn-promo">مشاهده</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">خدمات</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">تماس با ما</a>
        </li>
    </ul>
</nav>

استایل‌های پایه و CSS Grid

<!-- کپی کردن کد با یک کلیک -->
/* استایل‌های عمومی */
body {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl; /* برای فارسی */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #F4F6F6;
}

.main-nav {
    background-color: #2C3E50;
    padding: 15px 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;
    align-items: center;
    flex-wrap: wrap; /* برای ریسپانسیو بودن منوی اصلی */
}

.nav-item {
    position: relative; /* برای قرار گرفتن مگا منو */
    margin: 0 15px;
}

.nav-link {
    display: block;
    padding: 10px 15px;
    color: #ECF0F1;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 5px;
}

.nav-link:hover,
.nav-item.active .nav-link {
    color: #2C3E50;
    background-color: #ECF0F1;
}

/* استایل‌دهی مگا منو */
.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #FFF;
    border-top: 5px solid #3498DB;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    padding: 25px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    border-radius: 0 0 10px 10px;
    top: 100%; /* برای قرار گرفتن زیر لینک اصلی */
}

.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-inner {
    max-width: 1200px; /* حداکثر عرض مگا منو */
    margin: 0 auto;
    padding: 0 20px;

    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 ستون مساوی */
    gap: 30px; /* فاصله بین ستون‌ها */
}

.mega-menu-section {
    padding: 15px 0;
}

.mega-menu-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #2C3E50;
    margin-bottom: 15px;
    border-bottom: 2px solid #ECF0F1;
    padding-bottom: 8px;
}

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

.mega-menu-list li {
    margin-bottom: 8px;
}

.mega-menu-list a {
    color: #34495E;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
    display: block;
    padding: 5px 0;
}

.mega-menu-list a:hover {
    color: #3498DB;
    padding-right: 5px;
}

.promo-banner {
    background-color: #F7DC6F;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #2C3E50;
}

.promo-banner .btn-promo {
    display: inline-block;
    background-color: #E74C3C;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.promo-banner .btn-promo:hover {
    background-color: #C0392B;
}

مدیا کوئری‌ها برای ریسپانسیو کردن

<!-- کپی کردن کد با یک کلیک -->
/* برای تبلت و صفحه‌های متوسط */
@media (max-width: 992px) {
    .mega-menu-inner {
        grid-template-columns: repeat(3, 1fr); /* 3 ستون */
        gap: 20px;
    }
    .promo-banner {
        grid-column: span 3; /* بنر تبلیغاتی تمام عرض 3 ستون رو بگیره */
    }
}

/* برای موبایل و صفحه‌های کوچک */
@media (max-width: 768px) {
    .main-nav {
        padding: 10px 0;
    }
    .nav-list {
        flex-direction: column; /* آیتم‌های منوی اصلی زیر هم قرار بگیرن */
        align-items: stretch;
    }
    .nav-item {
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .nav-item:last-child {
        border-bottom: none;
    }
    .nav-link {
        text-align: center;
        padding: 12px 15px;
    }
    .has-mega-menu {
        width: 100%; /* آیتم اصلی مگا منو تمام عرض رو بگیره */
    }

    .mega-menu {
        position: static; /* مگا منو در حالت موبایل به صورت عادی در جریان صفحه قرار بگیره */
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        transform: translateY(0);
        transition: none;
        padding: 15px 0;
    }
    .has-mega-menu:hover .mega-menu,
    .has-mega-menu.active .mega-menu { /* در حالت موبایل با یک کلاس فعال بشه */
        opacity: 1;
        visibility: visible;
    }

    .mega-menu-inner {
        grid-template-columns: repeat(2, 1fr); /* 2 ستون برای زیرمنو */
        gap: 15px;
        padding: 0 15px;
    }
    .promo-banner {
        grid-column: span 2; /* بنر تبلیغاتی تمام عرض 2 ستون رو بگیره */
    }
}

/* برای موبایل‌های خیلی کوچک */
@media (max-width: 480px) {
    .mega-menu-inner {
        grid-template-columns: 1fr; /* 1 ستون برای زیرمنو */
    }
    .promo-banner {
        grid-column: span 1; /* بنر تبلیغاتی تمام عرض 1 ستون رو بگیره */
    }
    .mega-menu-section {
        border-bottom: 1px solid #ECF0F1;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .mega-menu-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    .mega-menu-title {
        text-align: center;
    }
}

جاوا اسکریپت برای کنترل مگا منو

<!-- کپی کردن کد با یک کلیک -->
document.addEventListener('DOMContentLoaded', () => {
    const navItemsWithMegaMenu = document.querySelectorAll('.has-mega-menu');

    navItemsWithMegaMenu.forEach(item => {
        const navLink = item.querySelector('.nav-link');
        const megaMenu = item.querySelector('.mega-menu');

        // Toggle mega menu on click for better mobile UX
        navLink.addEventListener('click', (event) => {
            if (window.innerWidth  {
            if (window.innerWidth  {
            if (event.key === 'Escape' && item.classList.contains('active')) {
                item.classList.remove('active');
            }
        });

        // Remove active class when resizing to desktop
        window.addEventListener('resize', () => {
            if (window.innerWidth > 768 && item.classList.contains('active')) {
                item.classList.remove('active');
            }
        });
    });
});

جدول نکات بهینه‌سازی مگا منو

پرسش‌های متداول (FAQ Schema)

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