是的，可以用純CSS創(chuàng)建漢堡菜單，具體步驟如下：1. 使用隱藏的checkbox作為開關(guān)，通過label模擬漢堡圖標(biāo)，并用ul構(gòu)建導(dǎo)航菜單；2. 用CSS將三個span樣式化為漢堡圖標(biāo)，并在:checked狀態(tài)下通過transform實(shí)現(xiàn)旋轉(zhuǎn)和隱藏動畫，形成“X”關(guān)閉效果；3. 利用~兄弟選擇器控制nav-menu的顯示，初始隱藏菜單，checked時通過scaleY展開，配合媒體查詢在大屏幕隱藏漢堡按鈕并顯示橫向菜單；4. 添加aria-label提升可訪問性，確保鍵盤導(dǎo)航和屏幕閱讀器兼容；該方案無需JavaScript，依賴CSS選擇器和輸入狀態(tài)實(shí)現(xiàn)交互，適用于輕量級響應(yīng)式站點(diǎn)，但不支持點(diǎn)擊外部關(guān)閉等復(fù)雜功能，需測試移動端觸控和多設(shè)備兼容性。

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 minimal 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 interactivity — no JS needed.

以上是如何創(chuàng)建僅CSS的漢堡菜單？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！