How to Create a Cool Slide Out Panel with CSS3 only

Posted in Tutorials • Posted on 25 Comments

Create a slideout panel by just using CSS3 onlyMany sites have a really cool hidden panel which contains some relevant information and this panel is revealed to us, with a cool animation, when we click on a particular button or hover over it. This has usually been achieved using jQuery. But now as we advent towards the future and CSS3 is becoming a reality, here is a tutorial on how to build an animated slide out panel using only CSS3.

Note: This tutorial uses some advanced css3 techniques which are not yet supported in Firefox. To get the full version, you should see the live demo in a web-kit engine for example Safari and Chrome. You can download the source code here. The final demo can also be seen here.

Step 1: Analyzing the Goal

A slide out panel can be used for various ways. Its uses depend on the requirement of the site. One may use it for a slide out login box or for just listing the subscribing options for the site. We are going to assume a scenario where we want a subscribe option for the viewers on the top right hand corner of the screen:

Final output after the coding is complete

Now once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor.

On hovering over the subscribe button, the slide out effect

Step 2: Creating the xHTML skeleton

Now that we know what we want to achieve, lets plan out how the xHTML architecture of the whole layout is going to be. We would basically need two parts of the layout. One part will be the top one, which will be our hidden panel and will contain the subscribing options. The second part will be the main content area for the whole layout. This area will contain everything which will be visible to the viewer. Here is how our code for the website layout is going to be:

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="slide-out">
		<div id="subscribe" class="page-wrap">
			<ul>

	<li><a class="<span class=">rss</a></li>
<a class="<span class=">" href="#">RSS</a>
				<li ><a class="fb" href="#">Facebook</a></li>
				<li><a class="twitter" href="#">Twitter</a></li>
				<li><a class="mail" href="#">Mail</a></li>
			</ul>
			<div class="clear"></div>
			<a href="#" class="button">Subscribe!</a>
		</div>
	</div>
	<div id="main-container">
		<div  class="page-wrap">
			<h1>CSS3 : The Future is Near!
			<h3>Hover over the subscribe button to see the cool slide effect created by using CSS3 purely.<small>Best viewed on Chrome and Safari</small>
Integer eu nunc in eros lobortis blandit. Suspendisse potenti.
Nunc porta tellus nec velit vehicula sodales. Aliquam vel grav
		</div>
	</div>
</body>
</html>

The body is divided into two parts, the slide-out and the
main-container. The slide out division contains the subscribe links along with the subscribe hyperlink button. Note that we have given a class of button to the subscribe hyperlink. The main container contains all the sites main text and information. Both the slide-out division and the main container division are assigned a
page wrap class to keep them aligned centered in the screen.

Step 3: Styling the basic layout

The style-sheet just contains some simple styling of the page. As explained above, there will be one slide-out division, one main container and one page-wrap class. These forms the basic styling elements of our page which give it the look we want.

CSS Layout of the whole page

The CSS for styling the basic layout of the page is as follows:

@import url('reset.css');
body{
	color: #484848;
	background-color: #f7f7f7;
}
.clear {
	clear: both;
}
h1{
	font-size: 58px;
	margin-bottom: 25px;
	height: 68px;
}
h3{
	font-size: 22px;
	margin-bottom: 25px;
}
p{
	text-align: left;
	margin-bottom: 20px;
}
#slide-out {
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative ;
	padding-top: 25px;
}
.page-wrap {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 635px;
}
#main-container{
	border-top:thick solid #484848;
	padding-top: 60px;
	text-align: center;
}
.button{
	background-image:url("../images/button.png");
	color:#FFFFFF;
	display:block;
	font-size:18px;
	height:28px;
	padding-top:5px;
	text-align:center;
	text-decoration:none;
	width:105px;
}
#subscribe ul li a{
	background-repeat:no-repeat;
	display:block;
	float:left;
	font-size:24px;
	height:38px;
	margin: 0px 20px;
	padding: 10px 0px 0px 55px;
	color: #d3d3d3;
	text-decoration: none;
	line-height: normal;
}
#subscribe ul li a:hover{
	color: #fff;
}
.rss{
	background-image: url('../images/rss.png');
}
.fb{
	background-image: url('../images/facebook.png');
}
.twitter{
	background-image: url('../images/twitter.png');
}
.mail{
	background-image: url('../images/mail-rss.png');
	margin: 0px;
}

After we have applied the basic styling to our page, it would look somewhat like this

After the basic CSS has been applied to the HTML structure

Now that the basic styling of the page is done, we have to set the stage for the panel to hide and show. To achieve that, the first thing we need to do is get the subscribe hyperlink to the bottom right corner of the slide-out division such that it is just peeping out of it. To do this, we have to manipulate the button class in the style-sheet a bit. We are going to make its positioning absolute and then give its right attribute a value of 0px. This will push the subscribe button to the right of the division as shown in the image below.

Pushing the Subscribe right buttons of the slide out panels to the right

Now we have to just push it down such that it sticks to the foot of the slide-out division. To do that we just have to assign a
negative 63px value to the bottom attribute.

Subscribe Button Position

Now that our subscribe button is at its proper place, all we have to do is push the slide-out div out of the screen. To do this, all we have to do is assign a negative margin equivalent to the height of the slide-out div. To prevent the step down bug in IE6, we also have to assign a line-height value of 0 px to the container of our subscribe links i.e. the subscribe box. To negate the 0 line height on the hyperlink elements, we have to assign a normal line height to them too. After modifying our button class, the slide-out id, the subscribe link elements and the subscribe id styles, they will now look like this:

#slide-out {
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative ;
	padding-top: 25px;
	margin-top: -98px;
}
#subscribe{
	line-height: 0px;
}
.button{
	background-image:url("../images/button.png");
	bottom:-63px;
	color:#FFFFFF;
	display:block;
	font-size:18px;
	height:28px;
	padding-top:5px;
	position:absolute;
	right:0;
	text-align:center;
	text-decoration:none;
	width:105px;
	z-index:100;
	line-height: normal;
}
#subscribe ul li a{
	background-repeat:no-repeat;
	display:block;
	float:left;
	font-size:24px;
	height:38px;
	margin: 0px 20px;
	padding: 10px 0px 0px 55px;
	color: #d3d3d3;
	text-decoration: none;
	line-height: normal;
}

We all hate Internet Explorer 6 a lot because we always have to add some extra code especially for it. In this case also we would have to do the same. To make the layout look the same as in the other browsers, we have to add some IE6 specific styling at the top of our html page, in the head section.

<!--[if IE]>
<style>
#slide-out {
	padding-top: 10px;
}
.button{
	bottom:-64px;
}
#subscribe ul li a{
	margin: 0px 15px;
	padding: 10px 0px 0px 55px;
}
#slide-out{
	margin-top: -83px;
}
</style>
<!--[<span class="hiddenSpellError" pre="">endif</span>]-->

Now that the slide-out panel is hidden, our task is to enable the hover event on the subscribe button such that the slide-out div reveals itself from the top of the page. You might ask why we have put the subscribe link in the slide-out panel and pushed it outside into the main container, rather than placing it in the main container itself.

The reason behind it is that, we have assigned a negative margin to the slide-out div and pushed it out of the screen. To make it visible again, we have allotted a hover event on it which makes it margin back to 0. As the slide-out div is out of the screen, so it is a difficult process to hover over it. Now because the subscribe hyperlink is actually inside the slide-out div, hence hovering over the subscribe link also acts as a hover event of the slide-out dive making its top-margin 0 and revealing it.

We can imagine the slide-out div to be a person who is hiding and just his hand is visible to us. When we touch the hand, the person comes out. The hover event which will make the slide-out div pop out of the top of the browser on hovering over the subscribe button will be as follows

#slide-out:hover{
	margin-top: 0px;
}

Step 4: The CSS3 Factor!

We are almost at the end of our tutorial. The hover event is set. The slide-out div reveals itself when we hover over the subscribe button. But the whole process happens without any animation effect. The only thing required now is to spice up the whole thing with a pinch of CSS3.Using the transition property in CSS3 we will make the effect as a smooth animation rather than the abrupt effect it has right now. We will give the transition property in the slide-out id style as we are changing its styling on hover. After modifying the slide-out id style, it will look like this:


#slide-out {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative;
	padding-top: 25px;
	margin-top: -98px;
}

You can change the animation speed by changing the transition speed which is set to 1s at present. This completes our task of enabling a smooth slide out panel from the top of our page without using any javascript.


The Drawbacks

The main drawback of this method at present is that CSS3 transition effect is only supported by webkit browsers like Google’s Chrome, Apple’s Safari and Opera. Even though the slide-out panel on hover would work on other browsers like Firefox and Internet Explorer, but the animation wont work in them. The other drawback is that it wont work on Internet Explorer 6.0 because it doesn’t support the CSS hover event. But there is obviously a solution for this.


Conclusion

This trick just displays how we can use CSS3 to replace some of the major effects provided by JavaScript libraries like jQuery and MooTools. I believe that with time, these basic transition effects will be replaced with CSS3 transition only. It makes the rendering faster and the load time also decreases as the JavaScript libraries plug-ins are not required. There are many ways of creating a slide out panel and JavaScript libraries really take this to a very high level and provide more functionality than just animation effect. There are many tutorials out there which guide you to create a slide out panel like that using jQuery and CSS together. For further reading related to slide out panels using JavaScript, you can refer to these awesome tutorials

1 Written ArticlesWebsite

Sumeet is a professional developer and the founder of Code-pal. Born and brought up in Kolkata, West Bengal, the eastern part of India. He loves to code and considers coding as his passion. He is pursuing his Masters Degree in Computer Application, is a fun guy and loves his family. Check him out on Twitter and Facebook

25 Comments Best Comments First
  • Markus

    Tuesday, July 6th, 2010 14:16

    4

    Opera is not using the Webkit rendering engine. They developed their own engine called Presto. That is the reason you need a special qualifier for Opera (-o)…

    +5
  • Pouya Saadeghi

    Tuesday, July 6th, 2010 18:31

    5

    Nice, but just for webkit :|

    +4
    • Sumeet Chawla

      Wednesday, July 7th, 2010 00:06

      7

      Well, at present it is, but soon almost all the browsers are going to support the major CSS3 features. You can check this out in this beautiful Interactive Infographic (which by the way is created using CSS3 too ^_^ ) http://html5readiness.com/

      +2
  • Andrea Austoni

    Monday, July 5th, 2010 15:23

    1

    Hey Sumeet thanks. Nice and clean, bookmarked for future reference. Good work!

    +1
    • Sumeet Chawla

      Monday, July 5th, 2010 23:51

      2

      Thanks Andrea, its nothing compared to the level of tutorials you write :)

      -3
    • Colonel

      Friday, May 20th, 2011 18:21

      17

      Now I know who the brainy one is, I’ll keep lnookig for your posts.

      -2
  • Peter

    Thursday, September 22nd, 2011 10:49

    18

    I love CSS3 and using it more and more. Great tutorial by the way!

    I think using CSS3 really proves useful for reducing the javascript used on sites and if I can replicate a motion using just CSS3 then why not? It saves javascript calls, eliminates potential js conflicts and looks great.

    Blending design with behaviour goes hand-in-hand, so seems natural for me.

    0
  • Zlatan Halilovic

    Tuesday, July 27th, 2010 22:07

    13

    Great article Sumeet! I just want to point out that opera isn’t using the webkit rendering engine, which you claim it does. You may want to correct that.

    0
    • Sumeet Chawla

      Wednesday, July 28th, 2010 10:07

      14

      Thanks for pointing it out Zlatan. My bad. Will tell the administrator to edit it :)

      -1
  • Rom

    Thursday, March 29th, 2012 11:40

    24

    How would one go about placing this slide out box to one side, and have it slide out from the left or right?

    Thanks in advanced!

    0
  • Peter

    Thursday, September 22nd, 2011 10:50

    19

    By the way, is there a way to slide on click?

    0
    • Jon

      Sunday, December 18th, 2011 02:33

      22

      Can you share how you got it to work via a “Click” I am a bit stumped here.

      0
  • enki

    Wednesday, February 29th, 2012 15:30

    23

    awesome! thanks!!! trying to use it at bottom of a page but impossible…

    0
  • XHMLTEAM

    Tuesday, April 10th, 2012 03:48

    25

    Clean, nice code. Thanks for sharing.

    0
  • Patt

    Saturday, November 26th, 2011 19:13

    20

    Nice widget! I added this article to my favorites for future reference!

    0
  • Gareth

    Wednesday, July 7th, 2010 18:45

    8

    Nice, but it does beg the question, shouldn’t behaviour be seperated from design?

    At the moment I try and keep content (xhtml), design (css) and behaviour (js) all seperate. Surely CSS3 transitional effects are merging design with behaviour?

    -1
    • Sumeet Chawla

      Wednesday, July 7th, 2010 22:43

      10

      Well pointed out Gareth. But I think, behaviour (with respect to design ) is like a subset of design itself. So merging them together is not that bad an option. It might be worrying when data and design are merged though. Previously, we use to depend on javascript libraries for this kind of functionalities (interface wise). But, CSS3 gives us these benefits and it has loads of advantages. One of the most important one is the size reduction. No javascript library is being loaded for this and hence it effects loading time.

      This is just my opinion.. What do you all think about this?

      -1
      • Saad Bassi

        Thursday, July 8th, 2010 07:46

        11

        Completely agree with you here.

        0
  • Parth

    Sunday, August 15th, 2010 04:12

    15

    Personally I don’t like stuff that just pop out. I like it to have smooth sliding effect with jquery.

    -1
    • Sumeet Chawla

      Monday, August 30th, 2010 18:38

      16

      Even I like the same Parth. The thing which I made also comes out smoothly but at present is only supported on webkit browsers. If you viewed this post on Firefox, it might have popped out just like that. But I think from Firefox 4.0 onwards, it will support CSS3 transitions. The main purpose of this post was to bypass jquery for that smooth sliding effect.

      -3
  • Ben

    Sunday, December 4th, 2011 15:55

    21

    Very cool, thanks. I’ve incorporated this into a personal portfolio website I’m hoping to put online in the next few weeks. Very, very helpful. And now (a couple of years later) it does work in Firefox!

    -1
  • Danny

    Wednesday, July 7th, 2010 19:16

    9

    Great tutorial, by using advanced techniques it seems more interesting and useful, and thanks for giving us some more great examples to learn css3, thanks for share

    -3
  • kpjothi

    Tuesday, July 6th, 2010 13:50

    3

    hi buddy!! nice start:) all the best!! we are waiting more tips from you!!

    -5
    • Sumeet Chawla

      Tuesday, July 6th, 2010 23:57

      6

      Thanks KP.. Even am looking forward to writing some interesting tutorials related to wordpress or may be joomla…

      -3
  • Rakesh Menon

    Tuesday, July 13th, 2010 20:32

    12

    nice tutorial… :-) waiting for more…..

    -5
  • XHMLTEAM

    Tuesday, April 10th, 2012 03:48

    25

    Clean, nice code. Thanks for sharing.

    0
  • Rom

    Thursday, March 29th, 2012 11:40

    24

    How would one go about placing this slide out box to one side, and have it slide out from the left or right?

    Thanks in advanced!

    0
  • enki

    Wednesday, February 29th, 2012 15:30

    23

    awesome! thanks!!! trying to use it at bottom of a page but impossible…

    0
  • Ben

    Sunday, December 4th, 2011 15:55

    21

    Very cool, thanks. I’ve incorporated this into a personal portfolio website I’m hoping to put online in the next few weeks. Very, very helpful. And now (a couple of years later) it does work in Firefox!

    -1
  • Patt

    Saturday, November 26th, 2011 19:13

    20

    Nice widget! I added this article to my favorites for future reference!

    0
  • Peter

    Thursday, September 22nd, 2011 10:50

    19

    By the way, is there a way to slide on click?

    0
    • Jon

      Sunday, December 18th, 2011 02:33

      22

      Can you share how you got it to work via a “Click” I am a bit stumped here.

      0
  • Peter

    Thursday, September 22nd, 2011 10:49

    18

    I love CSS3 and using it more and more. Great tutorial by the way!

    I think using CSS3 really proves useful for reducing the javascript used on sites and if I can replicate a motion using just CSS3 then why not? It saves javascript calls, eliminates potential js conflicts and looks great.

    Blending design with behaviour goes hand-in-hand, so seems natural for me.

    0
  • Parth

    Sunday, August 15th, 2010 04:12

    15

    Personally I don’t like stuff that just pop out. I like it to have smooth sliding effect with jquery.

    -1
    • Sumeet Chawla

      Monday, August 30th, 2010 18:38

      16

      Even I like the same Parth. The thing which I made also comes out smoothly but at present is only supported on webkit browsers. If you viewed this post on Firefox, it might have popped out just like that. But I think from Firefox 4.0 onwards, it will support CSS3 transitions. The main purpose of this post was to bypass jquery for that smooth sliding effect.

      -3
  • Zlatan Halilovic

    Tuesday, July 27th, 2010 22:07

    13

    Great article Sumeet! I just want to point out that opera isn’t using the webkit rendering engine, which you claim it does. You may want to correct that.

    0
    • Sumeet Chawla

      Wednesday, July 28th, 2010 10:07

      14

      Thanks for pointing it out Zlatan. My bad. Will tell the administrator to edit it :)

      -1
  • Rakesh Menon

    Tuesday, July 13th, 2010 20:32

    12

    nice tutorial… :-) waiting for more…..

    -5
  • Danny

    Wednesday, July 7th, 2010 19:16

    9

    Great tutorial, by using advanced techniques it seems more interesting and useful, and thanks for giving us some more great examples to learn css3, thanks for share

    -3
  • Gareth

    Wednesday, July 7th, 2010 18:45

    8

    Nice, but it does beg the question, shouldn’t behaviour be seperated from design?

    At the moment I try and keep content (xhtml), design (css) and behaviour (js) all seperate. Surely CSS3 transitional effects are merging design with behaviour?

    -1
    • Sumeet Chawla

      Wednesday, July 7th, 2010 22:43

      10

      Well pointed out Gareth. But I think, behaviour (with respect to design ) is like a subset of design itself. So merging them together is not that bad an option. It might be worrying when data and design are merged though. Previously, we use to depend on javascript libraries for this kind of functionalities (interface wise). But, CSS3 gives us these benefits and it has loads of advantages. One of the most important one is the size reduction. No javascript library is being loaded for this and hence it effects loading time.

      This is just my opinion.. What do you all think about this?

      -1
      • Saad Bassi

        Thursday, July 8th, 2010 07:46

        11

        Completely agree with you here.

        0
  • Pouya Saadeghi

    Tuesday, July 6th, 2010 18:31

    5

    Nice, but just for webkit :|

    +4
    • Sumeet Chawla

      Wednesday, July 7th, 2010 00:06

      7

      Well, at present it is, but soon almost all the browsers are going to support the major CSS3 features. You can check this out in this beautiful Interactive Infographic (which by the way is created using CSS3 too ^_^ ) http://html5readiness.com/

      +2
  • Markus

    Tuesday, July 6th, 2010 14:16

    4

    Opera is not using the Webkit rendering engine. They developed their own engine called Presto. That is the reason you need a special qualifier for Opera (-o)…

    +5
  • kpjothi

    Tuesday, July 6th, 2010 13:50

    3

    hi buddy!! nice start:) all the best!! we are waiting more tips from you!!

    -5
    • Sumeet Chawla

      Tuesday, July 6th, 2010 23:57

      6

      Thanks KP.. Even am looking forward to writing some interesting tutorials related to wordpress or may be joomla…

      -3
  • Andrea Austoni

    Monday, July 5th, 2010 15:23

    1

    Hey Sumeet thanks. Nice and clean, bookmarked for future reference. Good work!

    +1
    • Sumeet Chawla

      Monday, July 5th, 2010 23:51

      2

      Thanks Andrea, its nothing compared to the level of tutorials you write :)

      -3
    • Colonel

      Friday, May 20th, 2011 18:21

      17

      Now I know who the brainy one is, I’ll keep lnookig for your posts.

      -2

Comments are closed.

54.91.159.232 - unknown - unknown - US