frontend-academy

Burger Menu Project

A responsive hamburger menu that toggles mobile navigation with smooth animations.

Learning Objectives

Features

Project Structure

burger-menu/
├── index.html    # HTML structure
├── style.css     # Styles and animations
├── script.js     # Menu toggle logic
└── README.md     # This file

Implementation Steps

  1. HTML Structure
    • Create hamburger button (3 lines)
    • Create navigation menu
    • Add overlay for click-outside detection
  2. CSS Styling
    • Hide menu off-screen by default
    • Style hamburger icon
    • Add transitions for smooth animations
    • Animate hamburger to X transformation
  3. JavaScript Logic
    • Toggle menu on button click
    • Animate hamburger icon
    • Close menu when clicking outside
    • Close menu on ESC key press

Key Concepts

CSS Classes Approach

// Good: Use classes for state
menuButton.addEventListener('click', () => {
  nav.classList.toggle('active');
  button.classList.toggle('active');
});

Smooth Transitions

.nav {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.nav.active {
  transform: translateX(0);
}

Hamburger Animation

/* Transform hamburger lines to X */
.line1.active {
  transform: rotate(45deg) translateY(10px);
}

.line2.active {
  opacity: 0;
}

.line3.active {
  transform: rotate(-45deg) translateY(-10px);
}

Extension Ideas

Resources