Sample Mega Menu Code

We believe in sharing... are you interested in a mega menu? Here is our code for our mega menu, help yourself.

What is a mega menu?

I was first introduced to the concept of a mega menu when I worked at UCare, a local health plan. The marketing team was very advanced and taught me about a different way to organize information. A traditional menu has a list of items at the top, and then maybe a drop down, with 1 column. A mega menu is just like that, except the drop down can have pictures, multiple columns, etc. This is a great way to organize many links, yet keeping the design in tack.

+++ SAMPLE CODE +++ USE AT YOUR OWN RISK +++

<meta charset="UTF-8" />

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

<style>

/* ------------------------------------------- */

/* --- GENERAL STYLES & CONFIGURATION --- */

/* This CSS contains the necessary styles for the mega-menu structure, */

/* mobile responsiveness, and visual effects like transparency. Use at your own discretion, developed by 1stContact.ai */

/* ------------------------------------------- */

:root {

--primary-color: #041b4b; /* Main Nav Background */

--accent-color: #F27F59; /* Button Color */

}

/* Base Nav Layout */

.main-nav { padding: 1rem 0; position: relative; z-index: 100; background-color: var(--primary-color); }

.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }

.header-layout { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }

/* Logo */

.logo { flex-shrink: 0; }

.logo img { height: 90px; width: 180px; object-fit: contain; }

/* Desktop Nav Links */

.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 1.2rem; }

.nav-link { color: white; text-decoration: none; font-weight: 500; padding: 0.5rem 0; display: block; white-space: nowrap; font-size: 0.85rem; }

/* Buttons */

.header-buttons { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; white-space: nowrap; }

.btnb { display: inline-block; padding: 0.6rem 1.2rem; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 0.8rem; }

.btnb-primary { background-color: var(--accent-color); color: white; }

.btnb-secondary { background-color: transparent; color: white; border: 2px solid white; }

/* ------------------------------------------- */

/* --- MEGA MENU STYLES (Includes Fixes) --- */

/* ------------------------------------------- */

.nav-item { position: relative; }

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

/* Transparent Dropdown Background */

.mega-menu-dropdown {

transform: translateY(-10px);

opacity: 0;

visibility: hidden;

transition: all 0.2s ease-in-out;

position: absolute;

top: 100%;

left: 0;

background: rgba(0, 0, 0, 0.8); /* Transparent Black Background */

backdrop-filter: blur(10px);

border-radius: 8px;

padding: 2rem;

min-width: 600px;

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);

border: 1px solid rgba(255, 255, 255, 0.2);

z-index: 1000;

text-align: left;

}

/* Mega Menu Grid */

.menu-grid { display: grid; gap: 1rem; }

.menu-grid.three-columns { grid-template-columns: repeat(3, 1fr); }

.menu-grid.four-columns { grid-template-columns: repeat(4, 1fr); }

/* Subheading Styling */

.menu-column h4 { color: white; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.75rem; }

/* NEW: Spacing fix for subheadings following another subheading */

.menu-column h4 + h4 { margin-top: 1.5rem; }

/* Submenu List Styling */

.submenu { list-style: none; padding: 0; margin: 0; } /* FIX: Removes default list bullets */

.submenu a { color: white; text-decoration: none; font-size: 0.75rem; display: flex; align-items: center; padding: 0.25rem 0; white-space: nowrap; }

.submenu i { margin-right: 0.5rem; width: 1em; text-align: center; color: #60a5fa; font-size: 0.8rem; flex-shrink: 0; }

.fa-fw { width: 1em; }

/* ------------------------------------------- */

/* --- MOBILE MENU & RESPONSIVE --- */

/* ------------------------------------------- */

.mobile-menu-button { display: none; background: none; border: none; color: white; font-size: 1.5rem; padding: 0.5rem; }

.mobile-menu { display: none; background: white; position: absolute; top: 100%; left: 0; right: 0; padding: 1rem; }

@media (max-width: 1024px) {

.nav-list, .header-buttons { display: none; }

.mobile-menu-button { display: block; }

.header-layout { justify-content: space-between; }

}

</style>

<nav class="main-nav">

<div class="nav-container">

<div class="header-layout">

<div class="logo">

<a href="#demo-home">

<img src="https://assets.cdn.filesafe.space/ZxV6a5v2dtZF5cAAOedY/media/68c427a58c828c0b4cec0657.png"

alt="Company Logo">

</a>

</div>

<div class="nav-wrapper">

<ul id="main-navigation" class="nav-list">

<li class="nav-item group">

<a href="#demo-products" class="nav-link">Products</a>

<div class="mega-menu-dropdown">

<div class="menu-grid three-columns">

<div class="menu-column">

<h4>Core Plans</h4>

<ul class="submenu">

<li><a href="#plan-ent"><i class="fas fa-gem fa-fw"></i><span>Enterprise Plan</span></a></li>

<li><a href="#plan-free"><i class="fas fa-leaf fa-fw"></i><span>Free Plan</span></a></li>

</ul>

</div>

<div class="menu-column">

<h4>Bundles & Add-ons</h4>

<ul class="submenu">

<li><a href="#bundle-complete"><i class="fas fa-box-open fa-fw"></i><span>Complete Bundle</span></a></li>

<li><a href="#addon-phone"><i class="fas fa-phone-volume fa-fw"></i><span>Business Phone</span></a></li>

</ul>

</div>

<div class="menu-column">

<h4>Getting Started</h4>

<ul class="submenu">

<li><a href="#demo"><i class="fas fa-desktop fa-fw"></i><span>Schedule a Demo</span></a></li>

<li><a href="#trial"><i class="fas fa-play-circle fa-fw"></i><span>Start Free Trial</span></a></li>

</ul>

</div>

</div>

</div>

</li>

<li class="nav-item group">

<a href="#demo-features" class="nav-link">Features</a>

<div class="mega-menu-dropdown">

<div class="menu-grid four-columns">

<div class="menu-column">

<h4>AI Features</h4>

<ul class="submenu">

<li><a href="#ai-writing"><i class="fas fa-magic fa-fw"></i><span>AI Email Writing</span></a></li>

<li><a href="#ai-chat"><i class="fas fa-comment-dots fa-fw"></i><span>Smart Chatbot</span></a></li>

</ul>

</div>

<div class="menu-column">

<h4>Sales & CRM</h4>

<ul class="submenu">

<li><a href="#crm"><i class="fas fa-address-book fa-fw"></i><span>CRM</span></a></li>

<li><a href="#pipeline"><i class="fas fa-stream fa-fw"></i><span>Pipeline Management</span></a></li>

</ul>

<h4 class="subheading-spacer">Marketing</h4>

<ul class="submenu">

<li><a href="#automation"><i class="fas fa-robot fa-fw"></i><span>Automations</span></a></li>

<li><a href="#email-sms"><i class="fas fa-mail-bulk fa-fw"></i><span>Email & SMS Campaigns</span></a></li>

</ul>

</div>

<div class="menu-column">

<h4>Communication</h4>

<ul class="submenu">

<li><a href="#phone"><i class="fas fa-phone fa-fw"></i><span>Business Phone System</span></a></li>

<li><a href="#live-chat"><i class="fas fa-comment fa-fw"></i><span>Live Chat Widgets</span></a></li>

</ul>

<h4 class="subheading-spacer">Operations</h4>

<ul class="submenu">

<li><a href="#scheduling"><i class="fas fa-calendar-alt fa-fw"></i><span>Online Scheduling</span></a></li>

<li><a href="#payments"><i class="fas fa-credit-card fa-fw"></i><span>Payment Processing</span></a></li>

</ul>

</div>

<div class="menu-column">

<h4>Platform & Analytics</h4>

<ul class="submenu">

<li><a href="#reporting"><i class="fas fa-chart-line fa-fw"></i><span>Analytics & Reporting</span></a></li>

<li><a href="#api"><i class="fas fa-code fa-fw"></i><span>API Access</span></a></li>

</ul>

</div>

</div>

</div>

</li>

<li class="nav-item group">

<a href="#demo-resources" class="nav-link">Resources</a>

<div class="mega-menu-dropdown">

<div class="menu-grid two-columns">

<div class="menu-column">

<h4>Learning Center</h4>

<ul class="submenu">

<li><a href="#calc"><i class="fas fa-calculator fa-fw"></i><span>Cost Calculator</span></a></li>

<li><a href="#faq"><i class="fas fa-info-circle fa-fw"></i><span>FAQ</span></a></li>

</ul>

</div>

<div class="menu-column">

<h4>Comparisons</h4>

<ul class="submenu">

<li><a href="#vs-hubspot"><i class="fas fa-balance-scale fa-fw"></i><span>vs HubSpot</span></a></li>

<li><a href="#vs-salesforce"><i class="fas fa-balance-scale fa-fw"></i><span>vs Salesforce</span></a></li>

</ul>

</div>

</div>

</div>

</li>

</ul>

</div>

<div class="header-buttons">

<a href="#demo-blog" class="header-link">Blog</a>

<a href="#demo-login" class="header-link">Login</a>

<a href="#demo-trial" class="btnb btnb-primary">Start Free Trial</a>

<a href="#demo-schedule" class="btnb btnb-secondary">Schedule Demo</a>

</div>

<button id="mobile-menu-button" class="mobile-menu-button" aria-expanded="false" aria-controls="mobile-menu">

<i class="fas fa-bars"></i>

</button>

</div>

</div>

<div id="mobile-menu" class="mobile-menu" aria-hidden="true">

<ul class="mobile-nav-list">

<li><a href="#demo-products">Products</a></li>

<li><a href="#demo-features">Features</a></li>

<li><a href="#demo-resources">Resources</a></li>

</ul>

<div class="mobile-buttons">

<a href="#demo-login" class="mobile-link">Login</a>

<a href="#demo-trial" class="btnb btnb-primary btnb-block">Start Free Trial</a>

<a href="#demo-schedule" class="btnb btnb-secondary btnb-block">Schedule Demo</a>

</div>

</div>

</nav>

<script>

// Mobile-Optimized Navigation Script (Minimized)

// This script is essential for the mobile menu toggle and responsive behavior.

(function() {

'use strict';

function toggleMobileMenu(e) {

if (e) {

e.preventDefault();

e.stopPropagation();

}

const mobileMenuButton = document.getElementById('mobile-menu-button');

const mobileMenu = document.getElementById('mobile-menu');

const icon = mobileMenuButton ? mobileMenuButton.querySelector('i') : null;

if (!mobileMenu || !mobileMenuButton) return;

const isMenuOpen = mobileMenu.classList.contains('show');

if (isMenuOpen) {

mobileMenu.classList.remove('show');

mobileMenuButton.setAttribute('aria-expanded', 'false');

mobileMenu.setAttribute('aria-hidden', 'true');

if (icon) { icon.className = 'fas fa-bars'; }

} else {

mobileMenu.classList.add('show');

mobileMenuButton.setAttribute('aria-expanded', 'true');

mobileMenu.setAttribute('aria-hidden', 'false');

if (icon) { icon.className = 'fas fa-times'; }

}

}

function initMobileMenu() {

const mobileMenuButton = document.getElementById('mobile-menu-button');

if (mobileMenuButton) {

mobileMenuButton.addEventListener('click', toggleMobileMenu, { passive: false });

}

}

document.addEventListener('DOMContentLoaded', initMobileMenu);

})();

</script>