Swastik Yadav

S Y

Navigate back to the homepage
Subscribe

Toggle functionality with pure CSS and no JavaScript

Swastik Yadav
May 31st, 2021 · 1 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 <aside> tag for the sidebar.

HTML

1<aside class="aside-wrapper">
2 <h1 class="logo-text"><span>Qpay</span>
3 <i class="fas fa-bars sidebar-toggle"></i>
4 </h1>
5
6 <ul>
7 <li><i class="fas fa-home"></i> Home</li>
8 <li><i class="fas fa-building"></i> Company</li>
9 <li><i class="fas fa-dollar-sign"></i> Perks</li>
10 <li><i class="fas fa-file-contract"></i> Legal</li>
11 <li><i class="fas fa-credit-card"></i> Payments</li>
12 </ul>
13
14 <ul>
15 <li><i class="fas fa-headset"></i> Get Help</li>
16 <li><i class="fas fa-comment"></i> Chat With Us</li>
17 </ul>
18</aside>

2 - Add input type checkbox

Just above the aside tag add an input type checkbox.

HTML

1<input type="checkbox" id="toggler" checked />
2<aside class="aside-wrapper">
3 <h1 class="logo-text"><span>Qpay</span>
4 <i class="fas fa-bars sidebar-toggle"></i>
5 </h1>
6
7 ...
8</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

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

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

1<!-- Input checkbox "ID" = "toggler" -->
2<input type="checkbox" id="toggler" checked />
3<aside class="aside-wrapper">
4 <h1 class="logo-text"><span>Qpay</span>
5 <!-- Label "FOR" = "toggler" -->
6 <label for="toggler">
7 <i class="fas fa-bars sidebar-toggle"></i>
8 </label>
9 </h1>
10
11 ...
12</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, found it useful, or felt happy please consider subscribing to my Weekly NewsLetter: https://swastikyadav.com/subscribe

Thank You!

More articles from Swastik Yadav

How CSS is parsed on the browser

How CSS is parsed on the browser?, How CSS render the document style?, How layout of the page is decided?

May 28th, 2021 · 1 min read

DataStructure and Algorithm Series in JavaScript

The complete guide to DataStructure and Algorithm in JavaScript for beginners. All major DS and Algos.

May 11th, 2021 · 8 min read

Become a better full-stack developer in 10 minutes a week.

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.



By subscribing, you agree with Revue’s Terms and Privacy Policy.
© 2021 Swastik Yadav
Link to $https://twitter.com/swastikJsDevLink to $https://github.com/SwastikyadavLink to $https://www.linkedin.com/in/swastik-yadav-6386b71b5/Link to $https://www.youtube.com/channel/UCHs73qDeimVFGTa-MzjtnLA