fullscreen-menu-overlay

Summary

Black fullscreen overlay menu that slides in when the burger is toggled. Left column carries the primary nav with two-level expand-on-click submenus; right column holds project list, useful links, two regional contact blocks and an absolute dodecahedron animation. Each part stages in with its own transition delay (0.4s, 0.6s, 0.8s).

HTML structure (minimal)

<div class="mil-menu-frame">
  <div class="mil-frame-top">
    <a href="home-1.html" class="mil-logo">A.</a>
    <div class="mil-menu-btn"><span></span></div>
  </div>
  <div class="container">
    <div class="mil-menu-content">
      <div class="row">
        <div class="col-xl-5">
          <nav class="mil-main-menu" id="swupMenu">
            <ul>
              <li class="mil-has-children mil-active">
                <a href="#.">Homepage</a>
                <ul>
                  <li><a href="home-1.html">Landing page</a></li>
                  <li><a href="home-2.html">Personal</a></li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
        <div class="col-xl-7">
          <div class="mil-menu-right-frame">
            <div class="mil-animation-in">
              <div class="mil-animation-frame"><div class="mil-animation mil-position-1 mil-scale" data-value-1="2" data-value-2="2"></div></div>
            </div>
            <div class="mil-menu-right">
              <h6 class="mil-muted mil-mb-30">Projects</h6>
              <ul class="mil-menu-list">…</ul>
              <div class="mil-divider mil-mb-60"></div>
              <p class="mil-light-soft">71 South Los Carneros Road…</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.mil-menu-frame {
  position: fixed; z-index: 9; width: 100%; height: 100vh;
  background-color: $dark; opacity: 0; pointer-events: none;
  transition: $t-md;

  & .mil-main-menu { transform: translateX(-30px); opacity: 0; transition: $t-md; }
  & .mil-menu-right-frame {
    padding-left: 60px; height: 100vh; border-left: solid 1px $lt-10;
    opacity: 0; transform: translateY(30px); transition: $t-md;
    & .mil-animation-in { position: absolute; top: -320px; right: 0; opacity: 0; transform: translateY(-60px); }
  }
  &.mil-active {
    opacity: 1; pointer-events: all;
    & .mil-main-menu { transform: translate(0,0); opacity: 1; transition-delay: .4s; }
    & .mil-menu-right-frame { opacity: 1; transform: translateY(0); transition-delay: .6s;
      & .mil-animation-in { opacity: 1; transform: translateY(0); transition-delay: .8s; } }
  }
}

Animation logic

// burger toggles the overlay
$('.mil-menu-btn').on("click", function () {
  $('.mil-menu-btn').toggleClass('mil-active');
  $('.mil-menu').toggleClass('mil-active');
  $('.mil-menu-frame').toggleClass('mil-active');
});

// nested nav expand on click
$('.mil-has-children a').on('click', function () {
  $('.mil-has-children ul').removeClass('mil-active');
  $('.mil-has-children a').removeClass('mil-active');
  $(this).toggleClass('mil-active');
  $(this).next().toggleClass('mil-active');
});

Notable details

• The overlay is registered as a Swup container (#swupMenu) so its DOM persists across page navigations.
• Three-stage stagger via pure CSS transition-delay (no JS timeline) — left nav leads, right column follows, ambient dodecahedron lands last.
• Right column has a vertical divider drawn by border-left: solid 1px $lt-10 at 60px padding, creating an editorial split without an extra element.
• Submenu collapses other open submenus by removing mil-active from siblings before toggling self — single-open behavior.

Use when

• A creative-agency site that needs both a primary nav and contextual content (projects, addresses) in the menu state.
• You're already using Swup or Barba and want a persistent shell across pages.
• Clients ask for "Apple-style" menus without modal-fatigue — opacity + transform reveals feel native here.

Caveats

• The right-frame ambient panel hides below 1200px width AND below 800px height — small laptops in landscape lose the dodecahedron.
• Submenu logic relies on jQuery; if porting to a framework, replace $('.mil-has-children a') delegation with a click handler that doesn't bubble to parent links.
• Component is initially display: visible but opacity: 0; pointer-events: none — screenshot pipeline will see it but may capture an empty black frame; consider a .mil-menu-frame.mil-active state in capture.