Menu / Sidebar toggle functionality with pure CSS and no JavaScript.

In this post we will explore how we can create a toggle functionality for Menu / SideBar with pure CSS and no JavaScript.

Toggle functionality is often built with JavaScript because it requires handling the click event.

But it can be built with pure CSS and no JavaScript.

Here is how.

1 - The Markup

Let's start with a simple tag for the sidebar.

HTML

<aside class="aside-wrapper">
  <h1 class="logo-text"><span>Qpay</span>
    <i class="fas fa-bars sidebar-toggle"></i>
  </h1>

  <ul>
    <li><i class="fas fa-home"></i> Home</li>
    <li><i class="fas fa-building"></i> Company</li>
    <li><i class="fas fa-dollar-sign"></i> Perks</li>
    <li><i class="fas fa-file-contract"></i> Legal</li>
    <li><i class="fas fa-credit-card"></i> Payments</li>
  </ul>

  <ul>
    <li><i class="fas fa-headset"></i> Get Help</li>
    <li><i class="fas fa-comment"></i> Chat With Us</li>
  </ul>
</aside>

2 - Add input type checkbox

Just above the aside tag add an input type checkbox.

HTML

<input type="checkbox" id="toggler" checked />
<aside class="aside-wrapper">
  <h1 class="logo-text"><span>Qpay</span>
    <i class="fas fa-bars sidebar-toggle"></i>
  </h1>

  ...
</aside>

3 - Toggle Sidebar

Now based on the checked / Unchecked state of the input, we can show and hide the sidebar in CSS.

The below code snippet says: If the input is checked, move the sidebar to the left by 250px. (250px is the width of the sidebar.)

CSS

/* Toggler Functionality */
input:checked ~ aside {
  left: -250px;
}

Now toggling the checkbox will show and hide the sidebar.

4 - Hamburger Menu

But we want this to work when we click on the hamburger, not on the checkbox.

1. Hide the input. (display: none)
2. Wrap the hamburger menu in a label tag with the "for" attribute.

Id of input checkbox and for attribute for the label should be the same. (This will trigger the checkbox when we click on hamburger icon.)

HTML

<!-- Input checkbox "ID" = "toggler" -->
<input type="checkbox" id="toggler" checked />
<aside class="aside-wrapper">
  <h1 class="logo-text"><span>Qpay</span>
    <!-- Label "FOR" = "toggler" -->
    <label for="toggler">
      <i class="fas fa-bars sidebar-toggle"></i>
    </label>
  </h1>

  ...
</aside>

And that's it. We created a toggle functionality without JavaScript.

Here is a complete live demo with the codebase: https://codepen.io/swastikyadav/pen/zYZPyrN

If you enjoyed this post you will surely love the my weekly NewsLetter

Thanks a lot for reading.