DEV Community

loading...
Cover image for Menu / Sidebar toggle functionality with pure CSS and no JavaScript.

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

Swastik Yadav
Writing about Full-Stack web development 👨🏻‍💻 and design. Building ⚒️ products in public || Working on 8020 Lessons || Join me on this venture to create something meaningful.
Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)