I’m here to show you how to create sliding panels using CSS and a class name toggle. Why use sliding panels on your app? Because they are awesome, that’s why. Also, because they allow users to switch between views whithout the need to load another page.

First things first

Before we go wild with “creativity,” we need a simple HTML structure to work with.

Now for the fun part

Here is where we get crazy with our CSS. First, let’s add the rules that will be applied to .panel elements when .is-anchored is present. I’m omitting some styles in order to focus on the sliding panel layout, but I’ve supplied the complete style sheet.

Next, we add the styles for positioning the panels when .is-anchored is not present. Note that left is the only value which varies based on the presence of .is-anchored. This single property change allows us to create a smooth sliding effect using CSS transitions.

Slow clap

Here is the final product. I have used this technique for displaying individual assets on Gimme Bar, a magic little app that relies on infinite scroll for its pagination. Using sliding panels helped me preserve a user’s browser window position when scrolling, all without using a complex JS solution. Simple!

About Bedrich Rios

“Hello, there! My name is Bedrich, as in “bed” and “rich.” I’m the lead designer over at Gimme Bar and I do other design work at Fictive Kin.”