Mindless Philosophy






Create really simple Sliding Panels without Javascript

by Darren Street

Created on: Sunday April 27, 2014

Comment on this post

In this tutorial you can create a really simple absolutely positioned sliding panel for your website in minutes using only the power of CSS3 transitions. You can decide where you anchor the panel either to the top or left or right.

sliding-panels

The panels open in a smooth swoosh on hover as you would expect. And as you don’t have any scripts involved you don’t need to worry about having JS enabled and graceful degradation.

OK let’s start.

We are going to create three sliding panels. I have intentionally not styled them making it easier for you to apply your custom styles.

The right panel:

Create a div and apply a class of “panel” and an ID of “rightpanel”.


  <div id="rightpanel" class="panel">
<h2>Right Panel</h2>
<p>This content is sliding left</p>
</div>

This div is the block container for the content that will make up your sliding panel. You can put whatever html you like in there.

Create a new CSS rule and assign the class name “panel”. We are going to set some basic default rules to apply to the div.


*{margin:0;}
.panel {position:fixed; background:#444;color:#fff; height:200px; width:300px;}

First we set all margins to zero so that the panel appears to slide from the left Next the panel is fixed with a specified height and width. Now let’s create the “rightpanel” rule:


#rightpanel { right:-300px;}

This is the rule that sets the panel off screen. Remember the width we assigned to the div was 300px, now we set this block to 300px to the right of the visible screen which we can’t see.

OK all the basically the heavy lifting is done. Next we need a handle so that the visitor can access the off screen panel. Create another div within the first div and assign a class of “slide” and an ID of “slideleft”.

This is what it should look like:


  <div id="rightpanel" class="panel">
<div id="slideleft" class="slide">slide left</div>

<h2>Right Panel</h2>
<p>This content is sliding left</p>
</div>

Create a new CSS rules and assign the following properties:


.slide {background:#444;padding:30px 10px;}
#slideleft {position:absolute; top:50px; right:300px;}

All this does is absolutely position the div to the left of the unseen panel so that the box is exposed by 50px allowing the visitor to click on something.

If you run the page nothing much happens yet, we can fix that now.

Create an onhover style for the newly created rightpanel div. Remember the subordinate “slideleft” div is positioned 50px to the left of the div so the on-hover style will fire.


#rightpanel:hover{right:0px;}

OK this doesn’t look right, you are setting the div to the right position 0px...what. Well it does make sense. We originally set the div to -300px off the screen. Now we are setting the on:hover to 0px making the div visible again.

Run the page to see what I mean.

Magic huh.

But its clunky and not a smooth transition so this is where the magic of CSS transition effects come in. Within the #rightpanel rule block set the following new rules:


                  transition: right 0.4s ease-in-out;
                  -o-transition: right 0.4s ease-in-out;
                  -ms-transition: right 0.4s ease-in-out;
                  -moz-transition: right 0.4s ease-in-out;
                  -webkit-transition: right 0.4s ease-in-out;

These rules all do the same function for different browsers. First it defines the object to apply the effect to “right” , then it sets the duration of the effect “0.4s” and then specifies the easing effect “ease-in-out” Job done.

Run your page and you get a nice smooth sliding panel.

All done.

If you are feeling epic, try your hand to left and top panels. The complete code is shown below.

Have fun.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Sliding Panels</title>
<style>

*{margin:0;}
.slide {background:#444;padding:30px 10px;}
.panel {position:fixed; background:#444;color:#fff; height:200px; width:300px;}

#rightpanel:hover{right:0px;}
#slideleft {position:absolute; top:50px; right:300px;}

#leftpanel:hover {left:0; }
#slideright {position:absolute; top:50px; left:300px;}

#toppanel:hover {top:0; }
#slidedown {position:absolute; top:200px; left:86px; padding:10px 30px; }

#rightpanel { right:-300px;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
#leftpanel {left:-300px; top:100px;
transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-webkit-transition: left 0.4s ease-in-out;
}
#toppanel {left:400px; top:-200px;
transition: top 0.4s ease-in-out;
-o-transition: top 0.4s ease-in-out;
-ms-transition: top 0.4s ease-in-out;
-moz-transition: top 0.4s ease-in-out;
-webkit-transition: top 0.4s ease-in-out;
}

</style>

</head>
<body>

<div id="rightpanel" class="panel">
<div id="slideleft" class="slide">slide left</div>

<h2>Right Panel</h2>
<p>This content is sliding left</p>
</div>

<div id="leftpanel" class="panel">
<div id="slideright" class="slide">slide right</div>

<h2>Left Panel</h2>
<p>This content is sliding right</p>
</div>


<div id="toppanel" class="panel">
<div id="slidedown" class="slide">slide down</div>

<h2>top Panel</h2>
<p>This content is sliding down</p>
</div>

</body>
</html>

0 comments





Have your say


Sorry this post is no longer accepting comments.