Overlay Dramatic

Take Cover and Navigate

We’ve dropped menus down.
We’ve slid them out.

Now it’s time for the full-screen takeover — a cinematic overlay that steals the stage, dims the background, and puts navigation front and center.

This is the “you have my full attention” version of your hamburger menu.

---

🎬 Why Go Full Overlay?

Overlay menus shine when:

• you want users to focus on navigation, not the page behind it
• you’re designing a mobile-first experience with bold, app-like feel
• you have multiple sections and want breathing room, not cramped dropdowns
• you want a hero moment for your brand — logo, accent color, big type

Same button, same basic toggle logic — just a more dramatic layout.

---

🧱 HTML: Same Core Shell

We’re still building on the same HTML from earlier chapters:

<header class="site-header">
  <div class="brand-lockup">
    <span class="site-logo">⚡</span>
    <span class="site-title">WebDevTnT</span>
  </div>

  <button
    class="nav-toggle"
    type="button"
    aria-expanded="false"
    aria-controls="site-nav"
  >
    <span class="visually-hidden">Toggle navigation</span>
    <span class="nav-toggle-line"></span>
    <span class="nav-toggle-line"></span>
    <span class="nav-toggle-line"></span>
  </button>

  <nav id="site-nav" class="site-nav" aria-label="Main">
    <ul class="nav-list">
      <li><a href="#">Overview</a></li>
      <li><a href="#">Lessons</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">Assignments</a></li>
      <li><a href="#">Resources</a></li>
    </ul>
  </nav>
</header>

---

💄 CSS Concept: Full-Screen Layer

.site-nav {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}

.site-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}

---

🧠 JavaScript: Same Toggle, Different Target

const navToggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('#site-nav');

if (navToggle && nav) {
  navToggle.addEventListener('click', () => {
    const isOpen = nav.classList.toggle('is-open');
    navToggle.setAttribute('aria-expanded', String(isOpen));
  });
}

---

🧪 Live Demo: Overlay, But Make It Mini

⚡

WebDevTnT

• Overview
• Lessons
• Demos
• Assignments
• Resources

Tap the bun to black out the background and spotlight your nav. Tap again to drop back into the page.

---

🍱 Takeout Notes

• Overlays are just full-screen nav layers with position: fixed and a bit of drama.
• opacity + pointer-events is a clean way to toggle them without layout jumps.
• The same hamburger + aria-expanded pattern works across dropdowns, drawers, and overlays.
• Pick your flavor per project: dropdown for simple, drawer for structured, overlay for cinematic.

---

Next Up

You’ve now built the full Hamburger Menu Magic lineup!