Use hidden check boxes to control the menu status; 2. Position the menu off-screen by default through CSS; 3. Use checked and brother selectors to develop the effect; 4. Add transition to achieve smooth animation; 5. Optional push content or add masks to improve the user experience. This method can achieve a lightweight and efficient CSS sidebar menu without JavaScript, which is suitable for simple websites or learning scenarios, complete and effective.

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 combiner) 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.

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