Hamburger Menu

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f8fafc;
  overflow-x: hidden;
}

/* Header */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 200;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  color: #111;
}

/* Hamburger */
.hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  z-index: 300;
  position: relative;
}

.hamburger:active {
  background: #f3f4f6;
}

.bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #111;
  border-radius: 1px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, width 0.35s ease,
    background 0.3s ease;
}

/* Hamburger → X */
.hamburger.open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open .bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.hamburger.open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hamburger.open .bar {
  background: #fff;
}

/* Page content */
.page-content {
  margin-top: 80px;
  padding: 40px 24px;
  max-width: 480px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: #111;
}

.page-content p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}

kbd {
  display: inline-block;
  padding: 2px 8px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: monospace;
}

/* Fullscreen nav */
.fullscreen-nav {
  position: fixed;
  inset: 0;
  background: #0f0f13;
  z-index: 250;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 40px 40px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-nav.open {
  transform: translateX(0);
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-link {
  display: block;
  font-size: clamp(36px, 8vw, 52px);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  padding: 8px 0;
  opacity: 0;
  transform: translateX(40px);
  transition: color 0.2s ease, opacity 0.4s ease, transform 0.4s ease;
}

.nav-link:hover {
  color: #6366f1;
}

.fullscreen-nav.open .nav-link {
  opacity: 1;
  transform: translateX(0);
}

.nav-list li:nth-child(1) .nav-link {
  transition-delay: 0.08s;
}
.nav-list li:nth-child(2) .nav-link {
  transition-delay: 0.13s;
}
.nav-list li:nth-child(3) .nav-link {
  transition-delay: 0.18s;
}
.nav-list li:nth-child(4) .nav-link {
  transition-delay: 0.23s;
}
.nav-list li:nth-child(5) .nav-link {
  transition-delay: 0.28s;
}

.nav-footer {
  display: flex;
  gap: 24px;
  margin-top: 48px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s 0.32s ease, transform 0.3s 0.32s ease;
}

.fullscreen-nav.open .nav-footer {
  opacity: 1;
  transform: translateY(0);
}

.nav-footer a {
  font-size: 13px;
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-footer a:hover {
  color: #6366f1;
}

const hamburger = document.getElementById("hamburger");
const nav = document.getElementById("fullscreen-nav");
let isOpen = false;

function openMenu() {
  isOpen = true;
  hamburger.classList.add("open");
  hamburger.setAttribute("aria-expanded", "true");
  nav.classList.add("open");
  document.body.style.overflow = "hidden";
}

function closeMenu() {
  isOpen = false;
  hamburger.classList.remove("open");
  hamburger.setAttribute("aria-expanded", "false");
  nav.classList.remove("open");
  document.body.style.overflow = "";
}

hamburger.addEventListener("click", () => (isOpen ? closeMenu() : openMenu()));

document.querySelectorAll("[data-close]").forEach((el) => {
  el.addEventListener("click", (e) => {
    e.preventDefault();
    closeMenu();
  });
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && isOpen) closeMenu();
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Hamburger Menu</title>
  </head>
  <body>
    <header class="app-header">
      <div class="logo">Brand</div>
      <button
        class="hamburger"
        id="hamburger"
        aria-label="Open navigation menu"
        aria-expanded="false"
        aria-controls="fullscreen-nav"
      >
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </button>
    </header>

    <main class="page-content">
      <h1>Tap the menu icon</h1>
      <p>The hamburger button in the top right opens a fullscreen navigation overlay with a smooth slide-in animation and staggered link reveals.</p>
      <p>Try pressing <kbd>Escape</kbd> to close, or click any nav link.</p>
    </main>

    <nav
      class="fullscreen-nav"
      id="fullscreen-nav"
      role="dialog"
      aria-modal="true"
      aria-label="Site navigation"
    >
      <ul class="nav-list">
        <li><a href="#" class="nav-link" data-close>Home</a></li>
        <li><a href="#" class="nav-link" data-close>About</a></li>
        <li><a href="#" class="nav-link" data-close>Work</a></li>
        <li><a href="#" class="nav-link" data-close>Blog</a></li>
        <li><a href="#" class="nav-link" data-close>Contact</a></li>
      </ul>
      <div class="nav-footer">
        <a href="#">Twitter</a>
        <a href="#">GitHub</a>
        <a href="#">LinkedIn</a>
      </div>
    </nav>

    <script src="script.js"></script>
  </body>
</html>