使用隱藏的複選框控制菜單狀態(tài)；2. 通過(guò)CSS將菜單默認(rèn)定位在屏幕外；3. 利用:checked和兄弟選擇器觸發(fā)展開效果；4. 添加transition實(shí)現(xiàn)平滑動(dòng)畫；5. 可選推送內(nèi)容或添加遮罩提升用戶體驗(yàn)。該方法無(wú)需JavaScript即可實(shí)現(xiàn)輕量高效的CSS側(cè)邊欄菜單，適用於簡(jiǎn)單網(wǎng)站或?qū)W習(xí)場(chǎng)景，完整且有效。

Creating an off-canvas menu with CSS is a clean and efficient way to save space—especially on mobile devices—while still offering easy navigation. You can build it using just HTML and CSS (no JavaScript required for basic functionality), leveraging transforms and checkboxes for toggling.

Here's how to do it step by step:

? 1. Basic HTML Structure

Start with a simple layout: a toggle button, a main content area, and the off-canvas sidebar.

 <input type="checkbox" id="menu-toggle" class="menu-toggle">
<label for="menu-toggle" class="menu-button">?</label>

<nav class="off-canvas-menu">
  <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>

<main class="main-content">
  <h1>Your Website Content</h1>
  <p>Click the menu icon to open the off-canvas navigation.</p>
</main>

We use a hidden checkbox ( menu-toggle ) to control the menu state via CSS. The label acts as the toggle button.

? 2. Styling the Off-Canvas Menu with CSS

The key idea is to position the menu off-screen by default and slide it in using transform .

 /* Reset and base styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.menu-toggle {
  display: none; /* Hidden but functional */
}

.menu-button {
  position: fixed;
  top: 10px;
  left: 10px;
  background: #333;
  color: white;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  z-index: 3;
}

/* Off-canvas menu */
.off-canvas-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: #222;
  color: white;
  transform: translateX(-100%); /* Hidden by default */
  transition: transform 0.3s ease;
  z-index: 2;
  padding-top: 60px;
}

.off-canvas-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.off-canvas-menu a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #444;
}

.off-canvas-menu a:hover {
  background: #444;
}

/* Main content */
.main-content {
  padding: 20px;
  transition: transform 0.3s ease;
}

? 3. Toggle the Menu Using the Checkbox Hack

Use the :checked pseudo-class to trigger the menu appearance when the checkbox is toggled.

 /* Show menu when checkbox is checked */
.menu-toggle:checked ~ .off-canvas-menu {
  transform: translateX(0); /* Slide in */
}

/* Optional: Push main content when menu is open */
.menu-toggle:checked ~ .main-content {
  transform: translateX(250px);
}

The ~ (general sibling combinator) lets us style elements that come after the checkbox in the DOM.

? 4. Optional: Add Overlay or Responsive Behavior

For better UX, you might want to dim the background when the menu is open.

 /* Add a semi-transparent overlay */
.menu-toggle:checked ~ .main-content::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

This overlay also helps close the menu when clicked (since clicking outside the menu triggers the label or body, unchecking the input).

? Summary of Key Points

• Use a hidden checkbox as a toggle state.
• Position the menu off-screen with transform: translateX(-100%) .
• Use :checked and sibling selectors to trigger the slide-in effect .
• Add smooth transitions with transition .
• Optionally push content or add an overlay for better UX.

This method is lightweight and works without JavaScript. While modern apps often use JS for more complex behavior, this pure-CSS solution is perfect for simple sites or learning purposes.

Basically, it's all about positioning, transforms, and clever use of the checkbox hack. Not flashy, but effective.

以上是如何使用CSS創(chuàng)建一個(gè)外面菜單？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！