6 CSS Mega Menus & Dropdown Menus
Swiss Grid Department Store
Ivory canvas with a faint grid overlay, Playfair Display italic headings, Jost link text, DM Mono for counts. The Departments trigger opens a 5-column panel: a left department tile showing total counts, then one tinted column per macro-department (Women, Men, Kids, Home) with live item counts next to every sub-category, NEW/SALE tags, and a "View All" CTA row. A black footer strip with a gold highlighted sale link anchors the panel. Surfaces every branch of the site tree at once — best for marketplaces, department stores, multi-vertical retail.
Swiss Grid Department Store the 4th of 6 designs in the 6 CSS Mega Menus & Dropdown Menus collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<nav class="mm-dep" aria-label="Swiss Grid Department Store menu">
<!-- Utility bar -->
<div class="utility-bar">
<a href="#">Store Locator</a>
<a href="#">Order Tracker</a>
<a href="#">Gift Cards</a>
<a href="#">Sign In</a>
</div>
<ul class="nav-bar" role="menubar">
<!-- DEPARTMENTS -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
Departments <span class="count" aria-hidden="true">4</span>
</button>
<div class="mega mega-dept" role="menu">
<div class="dept-tile" aria-hidden="true">
<div class="dept-tile-pattern">
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
</div>
<div class="dept-eyebrow">Shop By</div>
<div class="dept-name">All Depart­ments</div>
<div class="dept-count">4 departments · 280+ categories</div>
</div>
<div class="dept-col women">
<div class="dept-col-header">
<span class="dept-label">Women</span>
<span class="dept-num">94 categories</span>
</div>
<ul class="sub-list">
<li><a href="#" role="menuitem">Clothing <span class="n">48</span></a></li>
<li><a href="#" role="menuitem">Shoes <span class="n">22</span></a></li>
<li><a href="#" role="menuitem">Bags & Purses <span class="n">16</span></a></li>
<li><a href="#" role="menuitem">Jewellery <span class="n">18</span></a></li>
<li><a href="#" role="menuitem">Swimwear <span class="new-tag">New</span></a></li>
<li><a href="#" role="menuitem">Lingerie <span class="n">12</span></a></li>
<li><a href="#" role="menuitem">Sportswear <span class="n">14</span></a></li>
</ul>
<div class="view-all-row"><a href="#">All Women</a></div>
</div>
<div class="dept-col men">
<div class="dept-col-header">
<span class="dept-label">Men</span>
<span class="dept-num">72 categories</span>
</div>
<ul class="sub-list">
<li><a href="#" role="menuitem">Clothing <span class="n">38</span></a></li>
<li><a href="#" role="menuitem">Shoes <span class="n">18</span></a></li>
<li><a href="#" role="menuitem">Bags & Wallets <span class="n">14</span></a></li>
<li><a href="#" role="menuitem">Grooming <span class="n">10</span></a></li>
<li><a href="#" role="menuitem">Sportswear <span class="n">16</span></a></li>
<li><a href="#" role="menuitem">Accessories <span class="n">12</span></a></li>
<li><a href="#" role="menuitem">Tailoring <span class="new-tag">New</span></a></li>
</ul>
<div class="view-all-row"><a href="#">All Men</a></div>
</div>
<div class="dept-col kids">
<div class="dept-col-header">
<span class="dept-label">Kids</span>
<span class="dept-num">58 categories</span>
</div>
<ul class="sub-list">
<li><a href="#" role="menuitem">Girls (2–16) <span class="n">22</span></a></li>
<li><a href="#" role="menuitem">Boys (2–16) <span class="n">20</span></a></li>
<li><a href="#" role="menuitem">Babies & Toddlers <span class="n">18</span></a></li>
<li><a href="#" role="menuitem">School Uniform <span class="n">10</span></a></li>
<li><a href="#" role="menuitem">Shoes <span class="n">14</span></a></li>
<li><a href="#" role="menuitem">Toys & Play</a></li>
<li><a href="#" role="menuitem">Back-to-School <span class="sale-tag">Sale</span></a></li>
</ul>
<div class="view-all-row"><a href="#">All Kids</a></div>
</div>
<div class="dept-col home">
<div class="dept-col-header">
<span class="dept-label">Home</span>
<span class="dept-num">56 categories</span>
</div>
<ul class="sub-list">
<li><a href="#" role="menuitem">Furniture <span class="n">24</span></a></li>
<li><a href="#" role="menuitem">Bedding <span class="n">16</span></a></li>
<li><a href="#" role="menuitem">Kitchen & Dining <span class="n">20</span></a></li>
<li><a href="#" role="menuitem">Lighting <span class="n">12</span></a></li>
<li><a href="#" role="menuitem">Rugs & Textiles <span class="n">14</span></a></li>
<li><a href="#" role="menuitem">Garden <span class="n">10</span></a></li>
<li><a href="#" role="menuitem">New Arrivals <span class="new-tag">New</span></a></li>
</ul>
<div class="view-all-row"><a href="#">All Home</a></div>
</div>
<div class="mega-footer">
<div class="f-left">
<a href="#">New In This Week</a>
<a href="#">Bestsellers</a>
<a href="#">Trending Now</a>
<a href="#" class="f-highlight">✨ Summer Sale — Up to 50% Off</a>
</div>
<a href="#">View Full Sitemap →</a>
</div>
</div>
</li>
<!-- LIFESTYLE -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
Lifestyle <span class="count" aria-hidden="true">3</span>
</button>
<div class="mega mega-life" role="menu">
<div class="dept-tile" aria-hidden="true">
<div class="dept-tile-pattern">
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
</div>
<div class="dept-eyebrow">Shop By</div>
<div class="dept-name">Life­style</div>
<div class="dept-count">3 sections · 110+ categories</div>
</div>
<div class="dept-col beauty">
<div class="dept-col-header">
<span class="dept-label">Beauty</span>
<span class="dept-num">40 categories</span>
</div>
<ul class="sub-list">
<li><a href="#" role="menuitem">Skincare <span class="n">18</span></a></li>
<li><a href="#" role="menuitem">Fragrance <span class="n">12</span></a></li>
<li><a href="#" role="menuitem">Makeup <span class="n">20</span></a></li>
<li><a href="#" role="menuitem">Haircare <span class="n">14</span></a></li>
<li><a href="#" role="menuitem">Wellness <span class="new-tag">New</span></a></li>
</ul>
<div class="view-all-row"><a href="#">All Beauty</a></div>
</div>
<div class="dept-col sport">
<div class="dept-col-header">
<span class="dept-label">Sport</span>
<span class="dept-num">36 categories</span>
</div>
<ul class="sub-list">
<li><a href="#" role="menuitem">Running <span class="n">14</span></a></li>
<li><a href="#" role="menuitem">Gym & Training <span class="n">12</span></a></li>
<li><a href="#" role="menuitem">Yoga & Pilates <span class="n">10</span></a></li>
<li><a href="#" role="menuitem">Cycling <span class="n">8</span></a></li>
<li><a href="#" role="menuitem">Outdoor & Hiking <span class="n">10</span></a></li>
</ul>
<div class="view-all-row"><a href="#">All Sport</a></div>
</div>
<div class="dept-col travel">
<div class="dept-col-header">
<span class="dept-label">Travel</span>
<span class="dept-num">34 categories</span>
</div>
<ul class="sub-list">
<li><a href="#" role="menuitem">Luggage <span class="n">12</span></a></li>
<li><a href="#" role="menuitem">Carry-ons <span class="n">8</span></a></li>
<li><a href="#" role="menuitem">Travel Accessories <span class="n">16</span></a></li>
<li><a href="#" role="menuitem">Packing Cubes <span class="n">6</span></a></li>
<li><a href="#" role="menuitem">Passport Holders <span class="new-tag">New</span></a></li>
</ul>
<div class="view-all-row"><a href="#">All Travel</a></div>
</div>
<div class="mega-footer">
<div class="f-left">
<a href="#">Staff Picks</a>
<a href="#">Gift Guides</a>
<a href="#" class="f-highlight">✨ New Wellness Arrivals</a>
</div>
<a href="#">View All Lifestyle →</a>
</div>
</div>
</li>
<!-- BRANDS -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Brands</button>
<div class="mega mega-brands" role="menu">
<div class="brand-col">
<div class="brand-col-title">Fashion</div>
<ul class="brand-list">
<li><a href="#" role="menuitem">Calvin Klein</a></li>
<li><a href="#" role="menuitem">Ralph Lauren</a></li>
<li><a href="#" role="menuitem">Tommy Hilfiger</a></li>
<li><a href="#" role="menuitem">BOSS</a></li>
<li><a href="#" role="menuitem">Polo Sport</a></li>
</ul>
</div>
<div class="brand-col">
<div class="brand-col-title">Footwear</div>
<ul class="brand-list">
<li><a href="#" role="menuitem">Nike</a></li>
<li><a href="#" role="menuitem">Adidas</a></li>
<li><a href="#" role="menuitem">New Balance</a></li>
<li><a href="#" role="menuitem">Dr. Martens</a></li>
<li><a href="#" role="menuitem">Clarks</a></li>
</ul>
</div>
<div class="brand-col">
<div class="brand-col-title">Beauty</div>
<ul class="brand-list">
<li><a href="#" role="menuitem">The Ordinary</a></li>
<li><a href="#" role="menuitem">Charlotte Tilbury</a></li>
<li><a href="#" role="menuitem">NARS</a></li>
<li><a href="#" role="menuitem">Aesop</a></li>
<li><a href="#" role="menuitem">Tatcha</a></li>
</ul>
</div>
<div class="brand-col">
<div class="brand-col-title">Home</div>
<ul class="brand-list">
<li><a href="#" role="menuitem">HAY</a></li>
<li><a href="#" role="menuitem">Muuto</a></li>
<li><a href="#" role="menuitem">&Tradition</a></li>
<li><a href="#" role="menuitem">Ferm Living</a></li>
<li><a href="#" role="menuitem">Menu</a></li>
</ul>
</div>
<div class="mega-footer">
<div class="f-left">
<a href="#">View All Brands A–Z</a>
<a href="#" class="f-highlight">✨ Brand of the Month: Cos</a>
</div>
<a href="#">Brand Directory →</a>
</div>
</div>
</li>
<!-- ABOUT -->
<li class="nav-item" role="none">
<button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">About</button>
</li>
</ul>
</nav> /* ─── 04 Swiss Grid Department Store — full taxonomy mega menu ──────
Imports Playfair Display + Jost + DM Mono. The faint grid overlay
from the original (body::before) is scoped to .mm-dep::before so
it stays inside the demo. Drop-shadow box-shadow on the panel
reads as a print-style hard offset. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Mono:wght@300;400&family=Jost:wght@200;300;400;500&display=swap');
.mm-dep {
--mm-dep-ivory: #f7f4ee;
--mm-dep-paper: #ede9e0;
--mm-dep-linen: #e5dfd3;
--mm-dep-ink: #1a1714;
--mm-dep-ink-mid: rgba(26, 23, 20, 0.55);
--mm-dep-ink-dim: rgba(26, 23, 20, 0.3);
--mm-dep-rule: rgba(26, 23, 20, 0.1);
--mm-dep-rule-mid: rgba(26, 23, 20, 0.18);
--mm-dep-accent: #2d6a4f;
--mm-dep-accent2: #b5451b;
--mm-dep-mono: 'DM Mono', ui-monospace, monospace;
position: relative;
background: var(--mm-dep-ivory);
font-family: 'Jost', system-ui, sans-serif;
width: 100%;
min-height: 600px;
overflow: hidden;
box-sizing: border-box;
}
.mm-dep *,
.mm-dep *::before,
.mm-dep *::after { box-sizing: border-box; }
/* faint grid lines — scoped to wrapper, not body */
.mm-dep::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--mm-dep-rule) 1px, transparent 1px),
linear-gradient(90deg, var(--mm-dep-rule) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 1;
}
.mm-dep .utility-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
padding: 8px 32px;
background: var(--mm-dep-ink);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
z-index: 3;
}
.mm-dep .utility-bar a {
font-family: var(--mm-dep-mono);
font-size: 9px;
font-weight: 300;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.45);
text-decoration: none;
text-transform: uppercase;
transition: color 0.2s;
}
.mm-dep .utility-bar a:hover { color: rgba(255, 255, 255, 0.85); }
.mm-dep .nav-bar {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--mm-dep-ivory);
border-bottom: 2px solid var(--mm-dep-ink);
position: relative;
z-index: 4;
}
.mm-dep .nav-item { position: relative; list-style: none; }
.mm-dep .nav-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 26px;
height: 60px;
font-family: 'Jost', system-ui, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-dep-ink-mid);
background: transparent;
border: 0;
border-right: 1px solid var(--mm-dep-rule);
cursor: pointer;
user-select: none;
transition: color 0.25s;
position: relative;
}
.mm-dep .nav-bar .nav-item:first-child .nav-trigger { border-left: 1px solid var(--mm-dep-rule); }
.mm-dep .nav-trigger .count {
font-family: var(--mm-dep-mono);
font-size: 8px;
color: var(--mm-dep-ink-dim);
letter-spacing: 0;
transition: color 0.25s;
}
.mm-dep .nav-item:hover .nav-trigger,
.mm-dep .nav-item.mm-open .nav-trigger { color: var(--mm-dep-ink); }
.mm-dep .nav-item:hover .nav-trigger .count,
.mm-dep .nav-item.mm-open .nav-trigger .count { color: var(--mm-dep-accent); }
.mm-dep .nav-trigger::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--mm-dep-ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mm-dep .nav-item:hover .nav-trigger::after,
.mm-dep .nav-item.mm-open .nav-trigger::after { transform: scaleX(1); }
/* ── Mega panel ── */
.mm-dep .mega {
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translateX(-50%) translateY(-10px);
background: var(--mm-dep-ivory);
border: 2px solid var(--mm-dep-ink);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: grid;
overflow: hidden;
box-shadow: 6px 6px 0 var(--mm-dep-ink);
min-width: min(900px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
z-index: 5;
}
.mm-dep .nav-item:hover .mega,
.mm-dep .nav-item.mm-open .mega {
opacity: 1;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.mm-dep .mega-dept { grid-template-columns: 200px repeat(4, 1fr); }
.mm-dep .mega-life { grid-template-columns: 220px repeat(3, 1fr); }
.mm-dep .mega-brands { grid-template-columns: repeat(4, 1fr); min-width: min(760px, calc(100vw - 32px)); }
/* ── Department tile ── */
.mm-dep .dept-tile {
border-right: 2px solid var(--mm-dep-ink);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px 20px;
background: var(--mm-dep-paper);
min-height: 400px;
position: relative;
overflow: hidden;
}
.mm-dep .dept-tile-pattern {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
opacity: 0.06;
}
.mm-dep .dept-tile-pattern span {
border-right: 1px solid var(--mm-dep-ink);
border-bottom: 1px solid var(--mm-dep-ink);
}
.mm-dep .dept-tile .dept-eyebrow {
font-family: var(--mm-dep-mono);
font-size: 8px;
font-weight: 300;
letter-spacing: 0.2em;
color: var(--mm-dep-ink-dim);
text-transform: uppercase;
margin-bottom: 8px;
position: relative;
}
.mm-dep .dept-tile .dept-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 32px;
font-weight: 400;
font-style: italic;
color: var(--mm-dep-ink);
line-height: 1.1;
margin-bottom: 14px;
position: relative;
}
.mm-dep .dept-tile .dept-count {
font-family: var(--mm-dep-mono);
font-size: 10px;
font-weight: 300;
color: var(--mm-dep-accent);
letter-spacing: 0.1em;
position: relative;
}
/* ── Sub-department column ── */
.mm-dep .dept-col {
border-right: 1px solid var(--mm-dep-rule-mid);
padding: 0;
}
.mm-dep .dept-col:last-of-type { border-right: none; }
.mm-dep .dept-col-header {
padding: 16px 18px 12px;
border-bottom: 2px solid var(--mm-dep-ink);
display: flex;
align-items: baseline;
justify-content: space-between;
}
.mm-dep .dept-col-header .dept-label {
font-family: 'Playfair Display', Georgia, serif;
font-size: 20px;
font-weight: 500;
color: var(--mm-dep-ink);
line-height: 1;
}
.mm-dep .dept-col-header .dept-num {
font-family: var(--mm-dep-mono);
font-size: 9px;
color: var(--mm-dep-ink-dim);
letter-spacing: 0.05em;
}
.mm-dep .dept-col.women .dept-col-header,
.mm-dep .dept-col.beauty .dept-col-header { background: #f0e8e4; }
.mm-dep .dept-col.men .dept-col-header,
.mm-dep .dept-col.sport .dept-col-header { background: #e4eaf0; }
.mm-dep .dept-col.kids .dept-col-header,
.mm-dep .dept-col.travel .dept-col-header { background: #eaf0e6; }
.mm-dep .dept-col.home .dept-col-header { background: #f0ece4; }
.mm-dep .sub-list {
list-style: none;
margin: 0;
padding: 12px 0;
}
.mm-dep .sub-list li { list-style: none; }
.mm-dep .sub-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 18px;
font-family: 'Jost', system-ui, sans-serif;
font-size: 13px;
font-weight: 300;
color: var(--mm-dep-ink-mid);
text-decoration: none;
transition: color 0.2s, background 0.2s, padding-left 0.25s;
border-bottom: 1px solid var(--mm-dep-rule);
position: relative;
}
.mm-dep .sub-list li a:last-child { border-bottom: none; }
.mm-dep .sub-list li a .n {
font-family: var(--mm-dep-mono);
font-size: 9px;
color: var(--mm-dep-ink-dim);
letter-spacing: 0.05em;
transition: color 0.2s;
flex-shrink: 0;
}
.mm-dep .sub-list li a:hover {
color: var(--mm-dep-ink);
background: var(--mm-dep-paper);
padding-left: 24px;
}
.mm-dep .sub-list li a:hover .n { color: var(--mm-dep-accent); }
.mm-dep .sub-list li a .new-tag,
.mm-dep .sub-list li a .sale-tag {
font-family: var(--mm-dep-mono);
font-size: 7.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-dep-ivory);
padding: 2px 6px;
margin-left: 6px;
}
.mm-dep .sub-list li a .new-tag { background: var(--mm-dep-accent); }
.mm-dep .sub-list li a .sale-tag { background: var(--mm-dep-accent2); }
.mm-dep .view-all-row {
padding: 12px 18px;
border-top: 2px solid var(--mm-dep-ink);
display: flex;
align-items: center;
justify-content: space-between;
}
.mm-dep .view-all-row a {
font-family: var(--mm-dep-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--mm-dep-ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s;
}
.mm-dep .view-all-row a::after { content: '\2192'; }
.mm-dep .view-all-row a:hover { gap: 14px; }
/* ── Brands grid ── */
.mm-dep .brand-col {
padding: 20px 22px;
border-right: 1px solid var(--mm-dep-rule-mid);
}
.mm-dep .brand-col:last-of-type { border-right: none; }
.mm-dep .brand-col-title {
font-family: var(--mm-dep-mono);
font-size: 8px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mm-dep-ink-dim);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--mm-dep-rule-mid);
}
.mm-dep .brand-list { list-style: none; margin: 0; padding: 0; }
.mm-dep .brand-list li a {
display: block;
padding: 8px 0;
font-family: 'Playfair Display', Georgia, serif;
font-size: 15px;
font-weight: 400;
color: var(--mm-dep-ink-mid);
text-decoration: none;
border-bottom: 1px solid var(--mm-dep-rule);
transition: color 0.2s, padding-left 0.25s;
}
.mm-dep .brand-list li a:hover { color: var(--mm-dep-ink); padding-left: 8px; }
/* ── Mega footer ── */
.mm-dep .mega-footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 22px;
background: var(--mm-dep-ink);
flex-wrap: wrap;
gap: 12px;
}
.mm-dep .mega-footer .f-left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mm-dep .mega-footer a {
font-family: var(--mm-dep-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s;
}
.mm-dep .mega-footer a:hover { color: #fff; }
.mm-dep .mega-footer .f-highlight { color: #f5c842 !important; }
/* Stagger */
.mm-dep .nav-item:hover .sub-list li,
.mm-dep .nav-item.mm-open .sub-list li { animation: mm-dep-up 0.35s ease both; }
.mm-dep .nav-item:hover .sub-list li:nth-child(1),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(1) { animation-delay: 0.04s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(2),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(2) { animation-delay: 0.08s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(3),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(3) { animation-delay: 0.12s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(4),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(4) { animation-delay: 0.16s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(5),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(5) { animation-delay: 0.20s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(6),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(6) { animation-delay: 0.24s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(7),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(7) { animation-delay: 0.28s; }
@keyframes mm-dep-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
.mm-dep .nav-trigger { padding: 0 14px; font-size: 10px; }
.mm-dep .mega-dept,
.mm-dep .mega-life,
.mm-dep .mega-brands {
grid-template-columns: 1fr;
min-width: calc(100vw - 24px);
}
.mm-dep .dept-tile { min-height: 160px; border-right: 0; border-bottom: 2px solid var(--mm-dep-ink); }
.mm-dep .dept-col, .mm-dep .brand-col {
border-right: 0;
border-bottom: 1px solid var(--mm-dep-rule-mid);
}
}
@media (prefers-reduced-motion: reduce) {
.mm-dep .mega,
.mm-dep .sub-list li,
.mm-dep .sub-list li a,
.mm-dep .view-all-row a { transition: none; animation: none; }
} (() => {
document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
const trigger = item.querySelector('.nav-trigger');
if (!trigger) return;
// Mouse + keyboard: toggle open on click / Enter / Space
trigger.addEventListener('click', e => {
e.preventDefault();
const isOpen = item.classList.contains('mm-open');
// Close any sibling that's open so only one panel shows at a time
item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
if (other !== item) other.classList.remove('mm-open');
const otherBtn = other.querySelector('.nav-trigger');
if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
});
item.classList.toggle('mm-open', !isOpen);
trigger.setAttribute('aria-expanded', String(!isOpen));
});
});
// Outside-click closes all open panels
document.addEventListener('click', e => {
document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
if (!item.contains(e.target)) {
item.classList.remove('mm-open');
const btn = item.querySelector('.nav-trigger');
if (btn) btn.setAttribute('aria-expanded', 'false');
}
});
});
// Escape closes the currently open panel
document.addEventListener('keydown', e => {
if (e.key !== 'Escape') return;
document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
item.classList.remove('mm-open');
const btn = item.querySelector('.nav-trigger');
if (btn) btn.setAttribute('aria-expanded', 'false');
});
});
})();