Making super-easy hidden sidebars using CSS utility classes

Hidden sidebars are all the rage in current web design practice. However, to some beginners, implementing one might seem like a daunting task. To those people, I say, “Fear not!” This article will walk you through how to easily create one, for use in all of your killer web projects.

You can view my finished demo over at CodePen.

Here’s the tl;dr: We’re going to create the sidebar, hide it off-screen, and then use some CSS utility classes and a little jQuery magic to bring everything into view.

I’m also using some Google Fonts and the Font Awesome icon library, but these aren’t required for the sidebar — just some aesthetic enhancements.

Let’s get down to business!

1. Set up the main content

First, let’s create all of our main content, so we can set up exactly how we want our body sections to look. This will obviously vary in style and complexity, depending on your project. Here’s my basic markup, if you’d like to follow along.

<!-- main content -->
<section id="main">
<h1 class="title">Super-easy hidden sidebar!</h1>
<p class="description">Here's a really easy way to create a hidden sidebar for your front-end projects. This approach utilizes a few CSS utility classes, along with some simple jQuery magic. For my demo, I'm also using some Google Fonts and the Font Awesome icon library; however, these aren't really required (just some aesthetic sugar).</p>
<p class="description">Go ahead, click on the icon in the top left&#8212;I dare you!</p>
<p class="description">For the full step-by-step tutorial, check out my sweet Medium article. Cheers!</p>
</section>

2. Set up the sidebar content

Next, let’s put our sidebar in. Place it above the main content in the markup.

<!-- hidden navigation -->
<div class="sidebar-wrapper">
<div class="sidebar">
<h2 class="sidebar-title">See, told you!</h2>
<p class="dedication">Let me know if you use this in one of your projects. I'd love to see your work in action!</p>
</div>
<div class="menu"><i class="fa fa-bars fa-2x"></i></div>
</div>

And our important styling for the sidebar:

/* SIDEBAR
====================*/
.sidebar-wrapper {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 35rem;
margin-left: -30rem;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
height: inherit;
width: 30rem;
background: #000;
color: #fff;
}
.menu {
font-size: 1.2rem;
position: absolute;
top: 1.5rem;
right: 1.3rem;
}

What’s going on here?

Our .sidebar-wrapper contains two inner containers, .sidebar , which holds our main sidebar content, and .menu , which holds the icon that we will use to toggle the sidebar into view. For a complete list of icon classes, check out the Font Awesome icon list.

We fix .sidebar-wrapper to the top-left of the browser window, and then we set the dimensions. By using height: 100vh; we can ensure the sidebar always extends the entire length of the viewport (“vh” stands for viewport height — you can also use “vw” for viewport width).

Finally, we can use absolute positioning to move the toggle icon to the upper-right portion of .sidebar-wrapper .

Notice that we’ve set the width of the wrapper to be slightly larger than the actual width of the sidebar; this is because the wrapper holds both the content and the toggle icon, and we want to keep the icon in view.

We can achieve this by applying a negative value to our left margin equal to the width of .sidebar — this will pull the content off-screen by that amount, hiding all of our sidebar content. However, since the wrapper is wider than our negative margin, some of the wrapper is still visible — the portion that contains the icon!

3. Adding CSS utility classes

In order to use jQuery’s toggleClass() method, we need to have classes to toggle. So, let’s add some! For this basic example, we need only two: one to shift the sidebar back to normal, and another to push the body content over.

/* jQ TOGGLE UTIL
====================*/
.show-sidebar {
margin-left: 0;
}
.push-body {
margin-left: 30rem;
}

What’s going on here?

Since we shifted the left margin of .sidebar-wrapper by a negative value, our .show-sidebar class will reset that value. On the flip side, we need to push our body content to the right; by setting margin-left equal to the width of the sidebar, it’ll shift right by the same amount, creating the illusion that the sidebar is pushing the body over.

4. Enter jQuery magic

Now that we have everything in place, let’s add some dynamic functionality. The script to do so is straight-forward (add it to your custom script tag/file):

$(function() {
$(".menu").on("click", function() {
$(".menu > i").toggleClass("fa-bars fa-close", 300);
$(".sidebar-wrapper").toggleClass("show-sidebar", 500);
$("body").toggleClass("push-body", 500);
});
});

Additionally, make sure you link the jQuery and your custom script tags by placing them just before the end</body> tag.

What’s going on here?

When we click on .menu (which holds the toggle icon), three things are going to happen:

  1. The toggle icon will swap .fa-bars and .fa-close classes, thereby changing the displayed icon.
  2. We’re pulling all of .sidebar-wrapper back on screen by resetting its margin-left value to 0. This reveals the sidebar content.
  3. We’re pushing all of the body content to the right by applying a positive margin-left value. By setting this value equal to the width of our sidebar content, it appears that the sidebar is what’s causing our body content to move.

About toggleClass() duration

In my example, you’ll notice that there are animation transitions between each CSS change, and in each toggleClass() call, I have a second argument that is a number.

That number is the duration (in ms) that the CSS changes take place. In order to have this type of effect, we need to add jQuery UI to our file. Place the source file just below the main jQuery script tag, just about your custom script.

jQuery UI extends the core jQuery toggleClass() functionality; however, it is not needed. You could eliminate the duration argument and the sidebar would still be revealed because the method exists natively in core jQuery.

Note that if you don’t plan on using all of jQuery UI’s widgets, you don’t have to link to the full library. You can download the separate files and link to each individual file needed; for the duration effects to work, you need to link to the core file as well as the effects core file.

Conclusion

And that’s it! That’s all you need to have a nifty hidden sidebar that will add a bit of style to your projects. Again, check out my CodePen to see the finished product, if you get stuck.

If you have any questions, please feel free to ask. Happy coding!

Show your support

Clapping shows how much you appreciated Justin Webb’s story.