6 CSS Mega Menus & Dropdown Menus03 / 06

CSS + JSMIT licensed

Biophilic Studio

Warm, earthy linen palette with a contained paper-grain texture overlay. Fraunces variable serif (italic display) drives the navigation links, DM Sans handles metadata. The Projects panel features a tall photography column with a gradient caption overlay; the Journal panel includes editorial thumbnail cards with title + meta. Botanical SVG leaf motifs appear as column corner accents, a subtle terra-cotta underline swipes in on hover, and organic dot indicators sit beside each nav item. Best for architecture studios, interior design, sustainable brands, cultural institutions.

Published

Live Demo
Try it

The code

<nav class="mm-bio" aria-label="Biophilic Studio main menu">
  <ul class="nav-bar" role="menubar">

    <!-- PROJECTS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Projects</span>
      </button>
      <div class="mega grid-project" role="menu">
        <div class="mega-feature">
          <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80" alt="" loading="lazy" />
          <div class="mega-feature-caption">
            <span class="eyebrow">Currently Featured</span>
            <span class="title">Fjordhaus<br />Residence</span>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">By Typology</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Private Residences<span class="note">Custom homes &amp; villas</span></a></li>
            <li><a href="#" role="menuitem">Cultural Spaces<span class="note">Museums, galleries &amp; pavilions</span></a></li>
            <li><a href="#" role="menuitem">Hospitality <span class="pill">New</span><span class="note">Hotels &amp; retreats</span></a></li>
            <li><a href="#" role="menuitem">Workplaces<span class="note">Studios &amp; offices</span></a></li>
            <li><a href="#" role="menuitem">Urban Landscape<span class="note">Parks &amp; public space</span></a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">By Context</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Coastal &amp; Marine</a></li>
            <li><a href="#" role="menuitem">Forest &amp; Mountain</a></li>
            <li><a href="#" role="menuitem">Urban Infill</a></li>
            <li><a href="#" role="menuitem">Rural &amp; Agricultural</a></li>
            <li><a href="#" role="menuitem">Heritage Adaptive</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">58 completed projects across 14 countries</span>
          <a href="#">View All Projects</a>
        </div>
      </div>
    </li>

    <!-- SERVICES -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Services</span>
      </button>
      <div class="mega grid-studio" role="menu">
        <div class="mega-col first">
          <div class="mega-col-label">Architecture</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Concept &amp; Master Plan</a></li>
            <li><a href="#" role="menuitem">Detailed Design</a></li>
            <li><a href="#" role="menuitem">Planning Submissions</a></li>
            <li><a href="#" role="menuitem">Construction Oversight</a></li>
            <li><a href="#" role="menuitem">Post-Occupancy Review</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Interior Design</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Spatial Concept <span class="pill">Featured</span></a></li>
            <li><a href="#" role="menuitem">Material &amp; Palette</a></li>
            <li><a href="#" role="menuitem">Bespoke Furniture</a></li>
            <li><a href="#" role="menuitem">Art Curation</a></li>
            <li><a href="#" role="menuitem">Landscaping</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Sustainability</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Passive Design</a></li>
            <li><a href="#" role="menuitem">Biophilic Integration</a></li>
            <li><a href="#" role="menuitem">Carbon Assessment</a></li>
            <li><a href="#" role="menuitem">Materials Research</a></li>
            <li><a href="#" role="menuitem">Living Certifications</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">Every project is assigned a dedicated principal architect</span>
          <a href="#">Start a Project</a>
        </div>
      </div>
    </li>

    <!-- JOURNAL -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Journal</span>
      </button>
      <div class="mega grid-journal" role="menu">
        <div class="mega-editorial">
          <div class="editorial-label">Recent Writing</div>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1502005229762-cf1b2da7c5d6?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">On the Grammar of Threshold Spaces</span>
              <span class="ec-meta">Essay &middot; 8 min read</span>
            </span>
          </a>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">Rammed Earth &amp; the Return of Slow Building</span>
              <span class="ec-meta">Material Study &middot; 6 min read</span>
            </span>
          </a>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1518780664697-55e3ad937233?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">What Scandinavian Light Teaches Us About Restraint</span>
              <span class="ec-meta">Reflection &middot; 5 min read</span>
            </span>
          </a>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Themes</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Biophilia</a></li>
            <li><a href="#" role="menuitem">Material Honesty</a></li>
            <li><a href="#" role="menuitem">Light &amp; Shadow</a></li>
            <li><a href="#" role="menuitem">Vernacular Forms</a></li>
            <li><a href="#" role="menuitem">Slow Architecture</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Series</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Site Visits</a></li>
            <li><a href="#" role="menuitem">Conversations</a></li>
            <li><a href="#" role="menuitem">Material Notes <span class="pill">New</span></a></li>
            <li><a href="#" role="menuitem">Process Diaries</a></li>
            <li><a href="#" role="menuitem">Book Reviews</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">Published every other Thursday</span>
          <a href="#">Read the Journal</a>
        </div>
      </div>
    </li>

    <!-- STUDIO -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Studio</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">About the Practice</a>
        <a href="#" role="menuitem">The Team</a>
        <a href="#" role="menuitem">Philosophy &amp; Ethics</a>
        <a href="#" role="menuitem">Awards &amp; Press</a>
        <a href="#" role="menuitem">Open Positions</a>
      </div>
    </li>

    <!-- CONTACT -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Contact</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">New Enquiries</a>
        <a href="#" role="menuitem">Press &amp; Media</a>
        <a href="#" role="menuitem">Visit the Studio</a>
        <a href="#" role="menuitem">Collaborations</a>
      </div>
    </li>

  </ul>
</nav>
/* ─── 03 Biophilic Studio — warm linen architecture mega menu ───────
   Imports Fraunces + DM Sans. The paper-grain texture overlay from the
   original mock has been scoped to .mm-bio::before so it stays inside
   the demo wrapper. Botanical SVG corner motifs are inlined as
   background-image data URIs on .mega-col::after. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;1,9..144,200;1,9..144,300&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;1,9..40,300&display=swap');

.mm-bio {
  --mm-bio-clay: #e8ddd0;
  --mm-bio-linen: #f4f0e8;
  --mm-bio-bark: #3d2e20;
  --mm-bio-moss: #4a5e3a;
  --mm-bio-moss-light: #7a9164;
  --mm-bio-terra: #c2704a;
  --mm-bio-stone: #9e9085;
  --mm-bio-warm-white: #faf8f4;
  --mm-bio-border: rgba(61, 46, 32, 0.12);
  --mm-bio-border-mid: rgba(61, 46, 32, 0.2);
  --mm-bio-text: #3d2e20;
  --mm-bio-text-mid: rgba(61, 46, 32, 0.6);
  --mm-bio-text-dim: rgba(61, 46, 32, 0.4);
  position: relative;
  background: var(--mm-bio-warm-white);
  font-family: 'DM Sans', system-ui, sans-serif;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-bio *,
.mm-bio *::before,
.mm-bio *::after {
  box-sizing: border-box;
}
/* Paper grain — scoped to wrapper, not body */

.mm-bio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.mm-bio .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--mm-bio-warm-white);
  border-bottom: 1px solid var(--mm-bio-border);
  position: relative;
  z-index: 3;
}
/* botanical SVG decoration on left of bar */

.mm-bio .nav-bar::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M2,12 Q10,2 20,12 Q10,22 2,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.4'/%3E%3Cpath d='M18,12 Q26,2 36,12 Q26,22 18,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.3'/%3E%3Cpath d='M34,12 Q42,2 52,12 Q42,22 34,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.2'/%3E%3Cline x1='2' y1='12' x2='78' y2='12' stroke='%234a5e3a' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.mm-bio .nav-item {
  position: relative;
  list-style: none;
}

.mm-bio .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 20px 26px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--mm-bio-text-mid);
  text-transform: lowercase;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
  position: relative;
}

.mm-bio .nav-trigger .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mm-bio-terra);
  opacity: 0;
  transition: opacity 0.3s;
  flex-shrink: 0;
}

.mm-bio .nav-item:hover .nav-trigger,
.mm-bio .nav-item.mm-open .nav-trigger {
  color: var(--mm-bio-bark);
}

.mm-bio .nav-item:hover .nav-trigger .dot,
.mm-bio .nav-item.mm-open .nav-trigger .dot {
  opacity: 1;
}

.mm-bio .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: var(--mm-bio-terra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mm-bio .nav-item:hover .nav-trigger::after,
.mm-bio .nav-item.mm-open .nav-trigger::after {
  transform: scaleX(1);
}
/* ── Mega Panel ── */

.mm-bio .mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--mm-bio-linen);
  border: 1px solid var(--mm-bio-border-mid);
  box-shadow: 0 8px 40px rgba(61, 46, 32, 0.1), 0 2px 8px rgba(61, 46, 32, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  overflow: hidden;
  z-index: 5;
}

.mm-bio .mega.grid-project {
  grid-template-columns: 260px 1fr 1fr;
  width: min(780px, calc(100vw - 32px));
}

.mm-bio .mega.grid-studio {
  grid-template-columns: 1fr 1fr 1fr;
  width: min(720px, calc(100vw - 32px));
}

.mm-bio .mega.grid-journal {
  grid-template-columns: 2fr 1fr 1fr;
  width: min(760px, calc(100vw - 32px));
}

.mm-bio .nav-item:hover .mega,
.mm-bio .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
/* ── Feature image panel ── */

.mm-bio .mega-feature {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.mm-bio .mega-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s;
  filter: saturate(0.85);
}

.mm-bio .nav-item:hover .mega-feature img,
.mm-bio .nav-item.mm-open .mega-feature img {
  transform: scale(1.04);
  filter: saturate(1);
}

.mm-bio .mega-feature-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 22px 22px;
  background: linear-gradient(to top, rgba(61, 46, 32, 0.75) 0%, transparent 100%);
}

.mm-bio .mega-feature-caption .eyebrow {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.7);
  margin-bottom: 6px;
}

.mm-bio .mega-feature-caption .title {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 200;
  font-style: italic;
  color: var(--mm-bio-linen);
  line-height: 1.2;
}
/* ── Link columns ── */

.mm-bio .mega-col {
  padding: 28px 24px;
  border-left: 1px solid var(--mm-bio-border);
  position: relative;
}

.mm-bio .mega-col.first {
  border-left: 0;
}

.mm-bio .mega-col::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,28 Q4,20 4,10 Q10,4 16,8 Q22,4 28,10 Q28,20 16,28z' stroke='%234a5e3a' stroke-width='0.6' fill='none' opacity='0.15'/%3E%3Cline x1='16' y1='8' x2='16' y2='28' stroke='%234a5e3a' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
}

.mm-bio .mega-col-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-bio-stone);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-bio-border);
}

.mm-bio .mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mm-bio .mega-links li {
  list-style: none;
}

.mm-bio .mega-links li a {
  display: block;
  padding: 9px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 200;
  color: var(--mm-bio-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(61, 46, 32, 0.06);
  transition: color 0.3s, padding-left 0.3s;
  position: relative;
  line-height: 1.3;
}

.mm-bio .mega-links li a:hover {
  color: var(--mm-bio-terra);
  padding-left: 12px;
}

.mm-bio .mega-links li a .note {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  color: var(--mm-bio-text-dim);
  margin-top: 1px;
  font-style: normal;
  letter-spacing: 0;
  transition: color 0.3s;
}

.mm-bio .mega-links li a:hover .note {
  color: rgba(194, 112, 74, 0.6);
}

.mm-bio .mega-links li a .pill {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-bio-moss-light);
  background: rgba(74, 94, 58, 0.1);
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
}
/* ── Editorial column (Journal) ── */

.mm-bio .mega-editorial {
  padding: 28px 24px;
  border-left: 1px solid var(--mm-bio-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mm-bio .editorial-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-bio-stone);
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-bio-border);
}

.mm-bio .editorial-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  text-decoration: none;
}

.mm-bio .editorial-card img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  filter: saturate(0.8);
  transition: filter 0.3s, transform 0.3s;
}

.mm-bio .editorial-card:hover img {
  filter: saturate(1);
  transform: scale(1.03);
}

.mm-bio .editorial-card .ec-text {
  display: flex;
  flex-direction: column;
}

.mm-bio .editorial-card .ec-text .ec-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-bio-bark);
  line-height: 1.4;
  transition: color 0.3s;
}

.mm-bio .editorial-card:hover .ec-title {
  color: var(--mm-bio-terra);
}

.mm-bio .editorial-card .ec-text .ec-meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  color: var(--mm-bio-text-dim);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
/* ── Footer ── */

.mm-bio .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(61, 46, 32, 0.04);
  border-top: 1px solid var(--mm-bio-border);
  flex-wrap: wrap;
  gap: 12px;
}

.mm-bio .mega-footer .note {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  font-style: italic;
  color: var(--mm-bio-text-dim);
  letter-spacing: 0.02em;
}

.mm-bio .mega-footer a {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-bio-terra);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s, color 0.3s;
}

.mm-bio .mega-footer a::after {
  content: '\2192';
  font-size: 12px;
}

.mm-bio .mega-footer a:hover {
  gap: 14px;
  color: var(--mm-bio-bark);
}
/* ── Simple drop ── */

.mm-bio .simple-drop {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 220px;
  background: var(--mm-bio-linen);
  border: 1px solid var(--mm-bio-border-mid);
  box-shadow: 0 8px 30px rgba(61, 46, 32, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 12px 0;
  z-index: 5;
}

.mm-bio .nav-item:hover .simple-drop,
.mm-bio .nav-item.mm-open .simple-drop {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.mm-bio .simple-drop a {
  display: block;
  padding: 10px 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 200;
  color: var(--mm-bio-text);
  text-decoration: none;
  transition: color 0.25s, background 0.25s, padding-left 0.3s;
  border-bottom: 1px solid rgba(61, 46, 32, 0.05);
}

.mm-bio .simple-drop a:hover {
  color: var(--mm-bio-terra);
  background: rgba(194, 112, 74, 0.05);
  padding-left: 32px;
}
/* ── Stagger ── */

.mm-bio .nav-item:hover .mega-links li,
.mm-bio .nav-item.mm-open .mega-links li {
  animation: mm-bio-rise 0.45s ease both;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(1),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(1) {
  animation-delay: 0.06s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(2),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(2) {
  animation-delay: 0.11s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(3),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(3) {
  animation-delay: 0.16s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(4),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(4) {
  animation-delay: 0.21s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(5),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(5) {
  animation-delay: 0.26s;
}

@keyframes mm-bio-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .mm-bio .nav-bar::before {
    display: none;
  }

  .mm-bio .nav-trigger {
    padding: 16px 12px;
    font-size: 11px;
  }

  .mm-bio .mega.grid-project,
    .mm-bio .mega.grid-studio,
    .mm-bio .mega.grid-journal {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
  }

  .mm-bio .mega-feature {
    min-height: 180px;
  }

  .mm-bio .mega-col,
    .mm-bio .mega-editorial {
    border-left: 0;
    border-top: 1px solid var(--mm-bio-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-bio .mega,
    .mm-bio .simple-drop,
    .mm-bio .mega-feature img,
    .mm-bio .editorial-card img,
    .mm-bio .mega-links li a,
    .mm-bio .mega-footer a {
    transition: none;
    animation: none;
  }

  .mm-bio .nav-item:hover .mega-feature img,
    .mm-bio .nav-item.mm-open .mega-feature img {
    transform: 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');
    });
  });
})();
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Mega Menus & Dropdown Menu from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Biophilic Studio
Source: https://codefronts.com/navigation/css-mega-menus/biophilic-studio/

Warm, earthy linen palette with a contained paper-grain texture overlay. Fraunces variable serif (italic display) drives the navigation links, DM Sans handles metadata. The Projects panel features a tall photography column with a gradient caption overlay; the Journal panel includes editorial thumbnail cards with title + meta. Botanical SVG leaf motifs appear as column corner accents, a subtle terra-cotta underline swipes in on hover, and organic dot indicators sit beside each nav item. Best for architecture studios, interior design, sustainable brands, cultural institutions.
## HTML
```html
<nav class="mm-bio" aria-label="Biophilic Studio main menu">
  <ul class="nav-bar" role="menubar">

    <!-- PROJECTS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Projects</span>
      </button>
      <div class="mega grid-project" role="menu">
        <div class="mega-feature">
          <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80" alt="" loading="lazy" />
          <div class="mega-feature-caption">
            <span class="eyebrow">Currently Featured</span>
            <span class="title">Fjordhaus<br />Residence</span>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">By Typology</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Private Residences<span class="note">Custom homes &amp; villas</span></a></li>
            <li><a href="#" role="menuitem">Cultural Spaces<span class="note">Museums, galleries &amp; pavilions</span></a></li>
            <li><a href="#" role="menuitem">Hospitality <span class="pill">New</span><span class="note">Hotels &amp; retreats</span></a></li>
            <li><a href="#" role="menuitem">Workplaces<span class="note">Studios &amp; offices</span></a></li>
            <li><a href="#" role="menuitem">Urban Landscape<span class="note">Parks &amp; public space</span></a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">By Context</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Coastal &amp; Marine</a></li>
            <li><a href="#" role="menuitem">Forest &amp; Mountain</a></li>
            <li><a href="#" role="menuitem">Urban Infill</a></li>
            <li><a href="#" role="menuitem">Rural &amp; Agricultural</a></li>
            <li><a href="#" role="menuitem">Heritage Adaptive</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">58 completed projects across 14 countries</span>
          <a href="#">View All Projects</a>
        </div>
      </div>
    </li>

    <!-- SERVICES -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Services</span>
      </button>
      <div class="mega grid-studio" role="menu">
        <div class="mega-col first">
          <div class="mega-col-label">Architecture</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Concept &amp; Master Plan</a></li>
            <li><a href="#" role="menuitem">Detailed Design</a></li>
            <li><a href="#" role="menuitem">Planning Submissions</a></li>
            <li><a href="#" role="menuitem">Construction Oversight</a></li>
            <li><a href="#" role="menuitem">Post-Occupancy Review</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Interior Design</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Spatial Concept <span class="pill">Featured</span></a></li>
            <li><a href="#" role="menuitem">Material &amp; Palette</a></li>
            <li><a href="#" role="menuitem">Bespoke Furniture</a></li>
            <li><a href="#" role="menuitem">Art Curation</a></li>
            <li><a href="#" role="menuitem">Landscaping</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Sustainability</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Passive Design</a></li>
            <li><a href="#" role="menuitem">Biophilic Integration</a></li>
            <li><a href="#" role="menuitem">Carbon Assessment</a></li>
            <li><a href="#" role="menuitem">Materials Research</a></li>
            <li><a href="#" role="menuitem">Living Certifications</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">Every project is assigned a dedicated principal architect</span>
          <a href="#">Start a Project</a>
        </div>
      </div>
    </li>

    <!-- JOURNAL -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Journal</span>
      </button>
      <div class="mega grid-journal" role="menu">
        <div class="mega-editorial">
          <div class="editorial-label">Recent Writing</div>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1502005229762-cf1b2da7c5d6?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">On the Grammar of Threshold Spaces</span>
              <span class="ec-meta">Essay &middot; 8 min read</span>
            </span>
          </a>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">Rammed Earth &amp; the Return of Slow Building</span>
              <span class="ec-meta">Material Study &middot; 6 min read</span>
            </span>
          </a>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1518780664697-55e3ad937233?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">What Scandinavian Light Teaches Us About Restraint</span>
              <span class="ec-meta">Reflection &middot; 5 min read</span>
            </span>
          </a>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Themes</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Biophilia</a></li>
            <li><a href="#" role="menuitem">Material Honesty</a></li>
            <li><a href="#" role="menuitem">Light &amp; Shadow</a></li>
            <li><a href="#" role="menuitem">Vernacular Forms</a></li>
            <li><a href="#" role="menuitem">Slow Architecture</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Series</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Site Visits</a></li>
            <li><a href="#" role="menuitem">Conversations</a></li>
            <li><a href="#" role="menuitem">Material Notes <span class="pill">New</span></a></li>
            <li><a href="#" role="menuitem">Process Diaries</a></li>
            <li><a href="#" role="menuitem">Book Reviews</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">Published every other Thursday</span>
          <a href="#">Read the Journal</a>
        </div>
      </div>
    </li>

    <!-- STUDIO -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Studio</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">About the Practice</a>
        <a href="#" role="menuitem">The Team</a>
        <a href="#" role="menuitem">Philosophy &amp; Ethics</a>
        <a href="#" role="menuitem">Awards &amp; Press</a>
        <a href="#" role="menuitem">Open Positions</a>
      </div>
    </li>

    <!-- CONTACT -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Contact</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">New Enquiries</a>
        <a href="#" role="menuitem">Press &amp; Media</a>
        <a href="#" role="menuitem">Visit the Studio</a>
        <a href="#" role="menuitem">Collaborations</a>
      </div>
    </li>

  </ul>
</nav>
```
## CSS
```css
/* ─── 03 Biophilic Studio — warm linen architecture mega menu ───────
   Imports Fraunces + DM Sans. The paper-grain texture overlay from the
   original mock has been scoped to .mm-bio::before so it stays inside
   the demo wrapper. Botanical SVG corner motifs are inlined as
   background-image data URIs on .mega-col::after. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;1,9..144,200;1,9..144,300&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;1,9..40,300&display=swap');

.mm-bio {
  --mm-bio-clay: #e8ddd0;
  --mm-bio-linen: #f4f0e8;
  --mm-bio-bark: #3d2e20;
  --mm-bio-moss: #4a5e3a;
  --mm-bio-moss-light: #7a9164;
  --mm-bio-terra: #c2704a;
  --mm-bio-stone: #9e9085;
  --mm-bio-warm-white: #faf8f4;
  --mm-bio-border: rgba(61, 46, 32, 0.12);
  --mm-bio-border-mid: rgba(61, 46, 32, 0.2);
  --mm-bio-text: #3d2e20;
  --mm-bio-text-mid: rgba(61, 46, 32, 0.6);
  --mm-bio-text-dim: rgba(61, 46, 32, 0.4);
  position: relative;
  background: var(--mm-bio-warm-white);
  font-family: 'DM Sans', system-ui, sans-serif;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-bio *,
.mm-bio *::before,
.mm-bio *::after {
  box-sizing: border-box;
}
/* Paper grain — scoped to wrapper, not body */

.mm-bio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.mm-bio .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--mm-bio-warm-white);
  border-bottom: 1px solid var(--mm-bio-border);
  position: relative;
  z-index: 3;
}
/* botanical SVG decoration on left of bar */

.mm-bio .nav-bar::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M2,12 Q10,2 20,12 Q10,22 2,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.4'/%3E%3Cpath d='M18,12 Q26,2 36,12 Q26,22 18,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.3'/%3E%3Cpath d='M34,12 Q42,2 52,12 Q42,22 34,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.2'/%3E%3Cline x1='2' y1='12' x2='78' y2='12' stroke='%234a5e3a' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.mm-bio .nav-item {
  position: relative;
  list-style: none;
}

.mm-bio .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 20px 26px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--mm-bio-text-mid);
  text-transform: lowercase;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
  position: relative;
}

.mm-bio .nav-trigger .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mm-bio-terra);
  opacity: 0;
  transition: opacity 0.3s;
  flex-shrink: 0;
}

.mm-bio .nav-item:hover .nav-trigger,
.mm-bio .nav-item.mm-open .nav-trigger {
  color: var(--mm-bio-bark);
}

.mm-bio .nav-item:hover .nav-trigger .dot,
.mm-bio .nav-item.mm-open .nav-trigger .dot {
  opacity: 1;
}

.mm-bio .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: var(--mm-bio-terra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mm-bio .nav-item:hover .nav-trigger::after,
.mm-bio .nav-item.mm-open .nav-trigger::after {
  transform: scaleX(1);
}
/* ── Mega Panel ── */

.mm-bio .mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--mm-bio-linen);
  border: 1px solid var(--mm-bio-border-mid);
  box-shadow: 0 8px 40px rgba(61, 46, 32, 0.1), 0 2px 8px rgba(61, 46, 32, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  overflow: hidden;
  z-index: 5;
}

.mm-bio .mega.grid-project {
  grid-template-columns: 260px 1fr 1fr;
  width: min(780px, calc(100vw - 32px));
}

.mm-bio .mega.grid-studio {
  grid-template-columns: 1fr 1fr 1fr;
  width: min(720px, calc(100vw - 32px));
}

.mm-bio .mega.grid-journal {
  grid-template-columns: 2fr 1fr 1fr;
  width: min(760px, calc(100vw - 32px));
}

.mm-bio .nav-item:hover .mega,
.mm-bio .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
/* ── Feature image panel ── */

.mm-bio .mega-feature {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.mm-bio .mega-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s;
  filter: saturate(0.85);
}

.mm-bio .nav-item:hover .mega-feature img,
.mm-bio .nav-item.mm-open .mega-feature img {
  transform: scale(1.04);
  filter: saturate(1);
}

.mm-bio .mega-feature-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 22px 22px;
  background: linear-gradient(to top, rgba(61, 46, 32, 0.75) 0%, transparent 100%);
}

.mm-bio .mega-feature-caption .eyebrow {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.7);
  margin-bottom: 6px;
}

.mm-bio .mega-feature-caption .title {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 200;
  font-style: italic;
  color: var(--mm-bio-linen);
  line-height: 1.2;
}
/* ── Link columns ── */

.mm-bio .mega-col {
  padding: 28px 24px;
  border-left: 1px solid var(--mm-bio-border);
  position: relative;
}

.mm-bio .mega-col.first {
  border-left: 0;
}

.mm-bio .mega-col::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,28 Q4,20 4,10 Q10,4 16,8 Q22,4 28,10 Q28,20 16,28z' stroke='%234a5e3a' stroke-width='0.6' fill='none' opacity='0.15'/%3E%3Cline x1='16' y1='8' x2='16' y2='28' stroke='%234a5e3a' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
}

.mm-bio .mega-col-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-bio-stone);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-bio-border);
}

.mm-bio .mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mm-bio .mega-links li {
  list-style: none;
}

.mm-bio .mega-links li a {
  display: block;
  padding: 9px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 200;
  color: var(--mm-bio-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(61, 46, 32, 0.06);
  transition: color 0.3s, padding-left 0.3s;
  position: relative;
  line-height: 1.3;
}

.mm-bio .mega-links li a:hover {
  color: var(--mm-bio-terra);
  padding-left: 12px;
}

.mm-bio .mega-links li a .note {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  color: var(--mm-bio-text-dim);
  margin-top: 1px;
  font-style: normal;
  letter-spacing: 0;
  transition: color 0.3s;
}

.mm-bio .mega-links li a:hover .note {
  color: rgba(194, 112, 74, 0.6);
}

.mm-bio .mega-links li a .pill {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-bio-moss-light);
  background: rgba(74, 94, 58, 0.1);
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
}
/* ── Editorial column (Journal) ── */

.mm-bio .mega-editorial {
  padding: 28px 24px;
  border-left: 1px solid var(--mm-bio-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mm-bio .editorial-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-bio-stone);
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-bio-border);
}

.mm-bio .editorial-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  text-decoration: none;
}

.mm-bio .editorial-card img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  filter: saturate(0.8);
  transition: filter 0.3s, transform 0.3s;
}

.mm-bio .editorial-card:hover img {
  filter: saturate(1);
  transform: scale(1.03);
}

.mm-bio .editorial-card .ec-text {
  display: flex;
  flex-direction: column;
}

.mm-bio .editorial-card .ec-text .ec-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-bio-bark);
  line-height: 1.4;
  transition: color 0.3s;
}

.mm-bio .editorial-card:hover .ec-title {
  color: var(--mm-bio-terra);
}

.mm-bio .editorial-card .ec-text .ec-meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  color: var(--mm-bio-text-dim);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
/* ── Footer ── */

.mm-bio .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(61, 46, 32, 0.04);
  border-top: 1px solid var(--mm-bio-border);
  flex-wrap: wrap;
  gap: 12px;
}

.mm-bio .mega-footer .note {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  font-style: italic;
  color: var(--mm-bio-text-dim);
  letter-spacing: 0.02em;
}

.mm-bio .mega-footer a {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-bio-terra);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s, color 0.3s;
}

.mm-bio .mega-footer a::after {
  content: '\2192';
  font-size: 12px;
}

.mm-bio .mega-footer a:hover {
  gap: 14px;
  color: var(--mm-bio-bark);
}
/* ── Simple drop ── */

.mm-bio .simple-drop {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 220px;
  background: var(--mm-bio-linen);
  border: 1px solid var(--mm-bio-border-mid);
  box-shadow: 0 8px 30px rgba(61, 46, 32, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 12px 0;
  z-index: 5;
}

.mm-bio .nav-item:hover .simple-drop,
.mm-bio .nav-item.mm-open .simple-drop {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.mm-bio .simple-drop a {
  display: block;
  padding: 10px 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 200;
  color: var(--mm-bio-text);
  text-decoration: none;
  transition: color 0.25s, background 0.25s, padding-left 0.3s;
  border-bottom: 1px solid rgba(61, 46, 32, 0.05);
}

.mm-bio .simple-drop a:hover {
  color: var(--mm-bio-terra);
  background: rgba(194, 112, 74, 0.05);
  padding-left: 32px;
}
/* ── Stagger ── */

.mm-bio .nav-item:hover .mega-links li,
.mm-bio .nav-item.mm-open .mega-links li {
  animation: mm-bio-rise 0.45s ease both;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(1),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(1) {
  animation-delay: 0.06s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(2),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(2) {
  animation-delay: 0.11s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(3),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(3) {
  animation-delay: 0.16s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(4),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(4) {
  animation-delay: 0.21s;
}

.mm-bio .nav-item:hover .mega-links li:nth-child(5),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(5) {
  animation-delay: 0.26s;
}

@keyframes mm-bio-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .mm-bio .nav-bar::before {
    display: none;
  }

  .mm-bio .nav-trigger {
    padding: 16px 12px;
    font-size: 11px;
  }

  .mm-bio .mega.grid-project,
    .mm-bio .mega.grid-studio,
    .mm-bio .mega.grid-journal {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
  }

  .mm-bio .mega-feature {
    min-height: 180px;
  }

  .mm-bio .mega-col,
    .mm-bio .mega-editorial {
    border-left: 0;
    border-top: 1px solid var(--mm-bio-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-bio .mega,
    .mm-bio .simple-drop,
    .mm-bio .mega-feature img,
    .mm-bio .editorial-card img,
    .mm-bio .mega-links li a,
    .mm-bio .mega-footer a {
    transition: none;
    animation: none;
  }

  .mm-bio .nav-item:hover .mega-feature img,
    .mm-bio .nav-item.mm-open .mega-feature img {
    transform: none;
  }
}
```

## JavaScript
```js
(() => {
  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');
    });
  });
})();
```

Techniques used in this demo

loading="lazy"MDN ↗filterMDN ↗role="" (ARIA)MDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →