Yes, you can create a hamburger menu with pure CSS. The specific steps are as follows: 1. Use hidden checkbox as a switch, simulate the hamburger icon through label, and use ul to build a navigation menu; 2. Use CSS to style the three spans into hamburger icons, and rotate and hide animations through transform in the checked state to form the "X" closing effect; 3. Use the ~ brother selector to control the display of nav-menu, initially hide the menu, expand it through scaleY when checked, and hide the hamburger button on the large screen and display the horizontal menu; 4. Adding aria-label to improve accessibility and ensure compatibility between keyboard navigation and screen readers; this solution does not require JavaScript, relies on CSS selectors and input states to achieve interaction, and is suitable for lightweight responsive sites, but does not support complex functions such as clicking external shutdowns. It needs to test mobile touch and multi-device compatibility.

Creating a CSS-only hamburger menu is totally doable using just HTML and CSS — no JavaScript required. The trick is to use a hidden checkbox and the :checked pseudo-class to toggle the menu state, combined with the ~ (general sibling) selector to control the menu display.

Here's how to build a simple, functional hamburger menu with pure CSS:

? 1. HTML Structure

Start with a minimum structure using a checkbox, hamburger icon (three spans), and the navigation menu:

 <nav class="navbar">
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <label for="nav-toggle" class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <ul class="nav-menu">
    <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>

• The checkbox ( #nav-toggle ) acts as the toggle switch.
• The <label> for the checkbox becomes the clickable hamburger icon.
• The .nav-menu is the list that will appear when the menu is open.

? 2. Style the Hamburger Icon

Make the three spans look like a hamburger menu, and animate them when active:

 .hamburger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
  height: 20px;
  justify-content: space-between;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #333;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Animate when menu is open */
#nav-toggle:checked .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}
#nav-toggle:checked .hamburger span:nth-child(2) {
  opacity: 0;
}
#nav-toggle:checked .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -5px);
}

This creates the classic "X" close animation when the menu is toggled.

? 3. Style and Toggle the Menu

Hide the checkbox and style the navigation menu to appear only when the checkbox is checked:

 .nav-toggle {
  display: none; /* Hide the checkbox */
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background: #f8f8f8;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.nav-menu li {
  padding: 10px 20px;
}

.nav-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

/* Show menu when checkbox is checked */
#nav-toggle:checked ~ .nav-menu {
  transform: scaleY(1);
}

/* Optional: Make it mobile-only */
@media (min-width: 768px) {
  .nav-toggle,
  .hamburger {
    display: none;
  }
  .nav-menu {
    display: flex !important;
    position: static;
    transform: none;
    flex-direction: row;
    gap: 20px;
    background: transparent;
    box-shadow: none;
  }
}

? The ~ selector lets the checkbox control the .nav-menu , even though it's not a direct sibling — it just needs to come after in the DOM.

? 4. Accessibility Tips

Make it more accessible:

• Add aria-label to the label:

   <label for="nav-toggle" class="hamburger" aria-label="Toggle menu">

• Consider focus styles for keyboard navigation.

---

Final Notes

This CSS-only hamburger menu works well for simple sites. It's lightweight and avoids JavaScript entirely. Just remember:

• It only toggles visibility — no advanced animations or outside-click closing without JS.
• On mobile, ensure touch targets are large enough.
• Test across devices and screen sizes.

Basically, it's a clever use of form input state and CSS selectors to simulate interaction — no JS needed.

The above is the detailed content of How to create a CSS-only hamburger menu?. For more information, please follow other related articles on the PHP Chinese website!