How to create hamburger menu in css

CssHow-ToBeginner · 4 min read

How to Create a Hamburger Menu in CSS: Simple Steps

To create a hamburger menu in CSS, use a hidden checkbox input to toggle the menu visibility and style three stacked bars with div elements. Use the :checked pseudo-class to change the menu display and animate the bars for a smooth effect.

📐

Syntax

The hamburger menu uses a hidden checkbox input to control the menu state. Three div elements styled as bars form the hamburger icon. When the checkbox is checked, CSS selectors like :checked change the menu's visibility and animate the icon.

input[type='checkbox']: hidden toggle control
label: clickable area for the hamburger icon
div.bar: each bar of the hamburger icon
:checked + label + nav: shows the menu when toggled

html

<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</label>
<nav>
  <!-- menu items here -->
</nav>

💻

Example

This example shows a simple hamburger menu that toggles a vertical navigation list. The three bars transform into an X when clicked, and the menu slides in from the left.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hamburger Menu CSS Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
  }
  /* Hide the checkbox */
  #menu-toggle {
    display: none;
  }
  /* Hamburger icon container */
  label {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    padding: 5px;
    margin: 10px;
  }
  /* Bars style */
  .bar {
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  /* Navigation menu hidden by default */
  nav {
    position: fixed;
    top: 0;
    left: -200px;
    width: 200px;
    height: 100vh;
    background-color: #eee;
    padding-top: 50px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
  }
  nav a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
  }
  nav a:hover {
    background-color: #ddd;
  }
  /* Show menu when checkbox is checked */
  #menu-toggle:checked + label + nav {
    left: 0;
  }
  /* Animate bars into X when checked */
  #menu-toggle:checked + label .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  #menu-toggle:checked + label .bar:nth-child(2) {
    opacity: 0;
  }
  #menu-toggle:checked + label .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
</style>
</head>
<body>
  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </label>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
  </nav>
</body>
</html>

Output

A page with a hamburger icon top-left. Clicking it slides in a vertical menu from the left with four links. The hamburger icon bars animate into an X shape.

⚠️

Common Pitfalls

Common mistakes include forgetting to hide the checkbox input, which shows an ugly box, or not linking the label to the checkbox with the for attribute. Another issue is missing the + label + nav selector, so the menu does not toggle properly. Also, not adding transitions can make the toggle abrupt and jarring.

html + css

<!-- Wrong: checkbox visible and label not linked -->
<input type="checkbox" id="menu-toggle" />
<label>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</label>
<nav>...</nav>

/* Right: hide checkbox and link label */
#menu-toggle {
  display: none;
}
<label for="menu-toggle">...</label>

📊

Quick Reference

Use a hidden checkbox to toggle menu state.
Style three bars inside a label for the hamburger icon.
Use :checked to show/hide the menu and animate the icon.
Always link label for attribute to checkbox id.
Add smooth CSS transitions for better user experience.

✅

Key Takeaways

Use a hidden checkbox input to toggle the hamburger menu visibility with CSS.

Style three stacked bars inside a label to create the hamburger icon.

Use the :checked pseudo-class to animate the icon and show the menu.

Always link the label's for attribute to the checkbox's id for accessibility.

Add CSS transitions for smooth opening and closing animations.