Mobile burger menu toggle

Part of the JavaScript in Action section of Coddy's HTML journey — lesson 13 of 27.

On small screens, websites often use a burger (☰) icon instead of showing the full navigation. When the user clicks the burger icon, JavaScript toggles the visibility of the navigation menu.

First, create the basic HTML structure: a button with 3 spans (styled as lines in CSS to form the burger icon) and a hidden <nav> that contains the menu links.

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Now let's add some basic CSS to style the burger menu:

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* Show the navigation when it doesn't have the hidden class */
nav:not(.hidden) {
  display: block;
}

Now, add JavaScript to toggle the menu:

// Select the burger button and mobile navigation
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Add click event listener to the burger button
burgerBtn.addEventListener('click', function() {
  // Toggle the hidden class on the mobile navigation
  mobileNav.classList.toggle('hidden');
});

When you click the burger button, the hidden class is toggled on the navigation menu, making it appear or disappear.

Challenge

Easy

Inside the event listener for the burger button, add two lines of code:

Toggle the "active" class on the button — this will animate the three lines into an “X”.
Toggle the "active" class on the menu — this will make the navigation menu appear and disappear.

Try it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Burger Button -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- Navigation Menu -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Main Content -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

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