The hamburger menu implemented in pure CSS expands the right sliding menu when the button is clicked on a small screen and changes the icon to a fork. The hidden buttons on the large screen display horizontal navigation; 1. Use hidden checkbox to trigger interaction with label; 2. Use checked pseudo-class to control menu display and animation; 3. The hamburger icon is composed of three horizontal lines, and when selected, the first and third rotations form a fork, and the second transparent disappears; 4. The menu is initially placed outside the right side with fixed positioning, and expands when selected, right:0 when selected; 5. Media query switches to horizontal layout and hides the hamburger button when the screen is greater than 768px; this solution does not require JavaScript, supports responsive switching and transition animation, which is suitable for basic scenes. Accessibility and clarity can be further optimized by adding ARIA attributes or SVG icons.

A common CSS Hamburger menu (hamburger menu) is commonly used in mobile or responsive websites to hide and expand navigation menus. Here is a simple but practical example of a pure CSS HTML implementation without JavaScript (using checkbox and label to simulate click interaction).

? Pure CSS burger menu example

1. HTML structure

 <nav class="navbar">
  <!-- Hamburger button (hidden checkbox) -->
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <label for="nav-toggle" class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </label>

  <!-- Navigation Menu-->
  <ul class="nav-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

2. CSS style

 /* Base reset and layout*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.navbar {
  background: #333;
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

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

/* Hamburger icon style*/
.hamburger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  z-index: 2;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #ffff;
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 3px;
}

/* Responsive: Small screen displays hamburgers, large screen displays full menu*/
.nav-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 70%;
  height: 100vh;
  background: #222;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: right 0.3s ease;
  list-style: none;
  z-index: 1;
}

.nav-menu li {
  margin: 1rem 0;
}

.nav-menu a {
  color: #ffff;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.nav-menu a:hover {
  color: #00c8ff;
}

/* When checkbox is selected, expand the menu*/
.nav-toggle:checked ~ .nav-menu {
  right: 0;
}

/* Hamburger icon animation: becomes "X" */
.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(-5px, -6px);
}

/* When large screen (> 768px): Hide hamburger, display horizontal menu*/
@media (min-width: 768px) {
  .hamburger,
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    gap: 2rem;
    right: auto;
    background: transparent;
    transition: none;
  }

  .nav-menu li {
    margin: 0;
  }
}

? Functional description

• Small screen : The hamburger button is displayed, and the menu slides out from the right after clicking.
• Large screen : Automatically switch to the landscape navigation bar, hide the hamburger button.
• No JS : Use :checked and ~ selector to control the menu display.
• Animation effect : Includes menu swipe and burger icon to cross.

? Tips and optimization suggestions

• If you need more complex interactions (such as clicking externally close), you can add a small amount of JavaScript.
• Accessibility can be improved with ARIA attributes, such as aria-label="Toggle navigation" .
• The icon can be replaced by SVG for clearer clarity.

Basically that's it. This example is simple and practical, suitable for learning or directly used in projects.

The above is the detailed content of css hamburger menu example. For more information, please follow other related articles on the PHP Chinese website!