Creating a Hamburger Menu (JavaScript)

While CSS-only hacks exist, the industry standard way to create an expandable mobile "hamburger" menu is to use a small snippet of JavaScript alongside your HTML and CSS.

When the user clicks the hamburger button, the JavaScript function simply adds an active class to the menu element. When clicked again, it removes that class. Your CSS dictates how that active class looks.

The HTML Structure

Unlike the checkbox hack, we can use a highly semantic and accessible structure when using JavaScript to provide the menu functionality. We use a standard button for our hamburger icon and an unordered list (ul) for the links. Be sure to give them both an id so JavaScript can find them:

The CSS Styling

In our CSS media query, we hide the links by default using display: none;. The next step is creating an .active class that restores the display property. This class won't be on the HTML by default; JavaScript will handle that:

The JavaScript Logic

Finally, we add our JavaScript inside a script tag at the bottom of the page. This script listens for a click event on the button, and toggles the active class on the menu:

Full Working Example

Below is the complete, interactive layout. Try resizing your browser window until you see the hamburger icon, then click it to watch the JavaScript toggle the CSS class:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Hamburger Menu Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
  }
  .navbar {
    background-color: #4a148c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    position: relative;
  }
  .navbar-brand {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
  }
  
  /* The visual hamburger button (hidden on desktop) */
  .menu-icon {
    display: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
  }
  .nav-links li a {
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
  }

/* Mobile Layout */
  @media (max-width: 600px) {
    .menu-icon {
      display: block; /* Show the hamburger */
    }
    .nav-links {
      display: none; /* Hide the links by default */
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: #380b6b;
      gap: 0;
    }
    .nav-links li a {
      padding: 15px 20px;
      border-top: 1px solid #4a148c;
    }
    
    /* JavaScript will add this class to the nav-links ul when clicked */
    .nav-links.active {
      display: flex;
    }
  }
</style>
</head>
<body>

<ul class="nav-links" id="nav-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div style="padding: 20px;">
  <p>Resize your browser window so it is narrower than 600px. Click the hamburger icon to execute the JavaScript function that toggles the "active" CSS class on the menu.</p>
</div>

// Add click event listener to the button
  menuBtn.addEventListener('click', function() {
    // Toggle the 'active' class on the menu
    navMenu.classList.toggle('active');
  });
</script>

</body>
</html>

View Output Full Screen Preview

Tip: Accessibility First

Using a button for interactive elements is always preferred over using a random div or span. Buttons are naturally keyboard-navigable and immediately recognized by screen readers as interactive controls.