Create a Slide-In Panel with jQuery

25Jun/0917

Create a Slide-In Panel with jQuery

In this tutorial, I'll explain how to create a slide-in panel effect with jQuery. Basically, this means a hidden panel the slides into view when it is triggered by a button or other action. This is often used to display a contact form in a fun way, which is exactly what I am using it for on the new UltraMega website. As it turns out, this is very easy to do.

View Demo

First, let's start with a basic page template. For simplicity, we'll just have a header section and a content section, which is where our panel will go. We will also add a div (#panel) to serve as our sliding panel, and a link to serve as a handle (#panel-tab) inside. Note you can change the href to point to a fallback page in case JavaScript is disabled. We also need to include our soon-to-be-created CSS file and the jQuery library (from Google) to the head section.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide-In Panel</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
  <div id="header"><h1>Slide-In Panel</h1></div>
  <div id="content">
    <div id="panel">
      <a href="#" id="panel-tab">Click Me</a>
      <p>Panel content goes here</p>
    </div>
  </div>
</div>
</body>
</html>

Now is a good time to create the CSS for the page. Create styles.css to add the following:

#wrapper {
	width: 960px;
	margin: 0px auto;
	color: #FFFFFF;
}
#header {
	height: 100px;
	background-color: #666666;
	text-align: center;
	line-height: 100px;
}

This sets the main page to be 960 pixels wide, centered, with white text. It also sets the header to be 100 pixels tall with gray background and centered text.

#content {
	height: 600px;
	position: relative;
	overflow: hidden;
	background-color: #CCCCCC;
	border: 1px solid #000000;
}

This sets up the content area. The important things to note are the position: relative and overflow: hidden. Setting the container position to relative is necessary to position the panel absolutely inside the container, and setting overflow to hidden hides the panel when it is out of view.

#panel {
	width: 300px;
	height: 400px;
	position: absolute;
	top: -400px;
	left: 0px;
	z-index: 200;
	background-color: #333333;
}

This sets up the sliding panel. The important things here are position: absolute, height, top, and z-index. You need to make sure that top is set to the opposite of the height and that the z-index is higher than anything else the panel overlaps.

#panel-tab {
	width: 140px;
	height: 40px;
	position: absolute;
	bottom: -40px;
	right: 0px;
	background-color: #000000;
	text-decoration: none;
	color: #FFFFFF;
}
#panel-tab:focus {
	outline: none;
}

This is for the button that opens the tab. This is also absolutely positioned to be just below the container (the panel), so bottom is set to the opposite of height. We also set cursor: pointer to show the hand as if it is a link.

So now that we have that out of the way, it's time for the actual jQuery code to make it happen:

var sipPos = 0;
$(document).ready(function() {
	$("#panel-tab").click(function(e) {
		e.preventDefault();
		$("#panel").animate({ top: sipPos }, 800, 'linear', function() {
			if(sipPos == 0) { sipPos = -400; }
			else { sipPos = 0; }
		});
	});
});

This code binds a function to the click event of the button (#panel-tab), which triggers our custom animation on the panel (#panel). There is also a variable called sipPos to store the next position that the panel will move to. Make sure to replace -400 with whatever you set top to for #panel in your CSS. Note the use of preventDefault to stop the default browser link behavior.

This uses the animate function, which accepts params (which CSS properties to change), duration (time in ms that the animation takes), easing (the type of easing effect to use), and callback (a function to call when the animation stops). For our callback, we set sipPos to whatever the next position will be (toggles between open and closed position).

Complete Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide-In Panel Demo</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
	$("#panel-tab").click(function(e) {
		e.preventDefault();
		$("#panel").animate({ top: sipPos }, 800, 'linear', function() {
			if(sipPos == 0) { sipPos = -400; }
			else { sipPos = 0; }
		});
	});
});
-->
</script>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1>Slide-In Panel</h1>
  </div>
  <div id="content">
    <div id="panel">
      <a href="#" id="panel-tab">Click Me</a>
      <p>Panel content goes here</p>
    </div>
  </div>
</div>
</body>
</html>

#wrapper {
	width: 960px;
	margin: 0px auto;
	color: #FFFFFF;
}
#header {
	height: 100px;
	background-color: #666666;
	text-align: center;
	line-height: 100px;
}
#content {
	height: 600px;
	position: relative;
	overflow: hidden;
	background-color: #CCCCCC;
	border: 1px solid #000000;
}
#panel {
	width: 300px;
	height: 400px;
	position: absolute;
	top: -400px;
	left: 0px;
	z-index: 200;
	background-color: #333333;
}
#panel-tab {
	width: 140px;
	height: 40px;
	position: absolute;
	bottom: -40px;
	right: 0px;
	background-color: #000000;
	text-decoration: none;
	color: #FFFFFF;
}
#panel-tab:focus {
	outline: none;
}

Conclusion

So that's all there is to it. You can use this to make some nice looking effects on your website. If you have any questions or ideas to improve this, please comment.

Also, this could be further simplified by using the slideToggle function, but the resulting effect is slightly different.

Similar Posts:

About Steve

Steve is the owner of UltraMega Tech. He is a freelance Web designer and developer who specializes in PHP and AJAX development.

Tagged as: CSS, JavaScript, jQuery, XHTML Leave a comment

Comments (17) Trackbacks (1) ( subscribe to comments on this post )

archie
July 28th, 2009 - 16:17

Can this be modified to be a small 50 pixel high tab that enters horizontally from the bottom left?

( REPLY )
- UltraMega
  July 28th, 2009 - 17:11
  
  I don’t see why not. All you need to do is position the tab using negative left and 0 bottom in the CSS to have the panel sit off the lower left of the screen. Then just animate left instead of top in the JS to make it move horizontally.
  
  ( REPLY )
Ad
August 11th, 2009 - 15:48

Nice script. Thanks!

Can it work with multiple divs on the same page? Obviously the ids would need to be changed to classes, but would it work?

Thanks.

Ad.

( REPLY )
- UltraMega
  August 11th, 2009 - 16:18
  
  Yeah, that should work fine. You’ll have to make some changes depending on how different each panel needs to move and so on.
  
  You’ll probably also need to store different values depending on the current state of each panel. This would be a good use of the jQuery data function.
  
  ( REPLY )
Rick
August 12th, 2009 - 17:25

Will this work if I drop a form into it?
I tried here another way and it flickers not sure why? > http://www.oz2designs.com/indexBeta02C2.html

( REPLY )
- Steve
  August 13th, 2009 - 14:05
  
  Yeah, it should work fine with a form. That’s actually what I use it for if you look at the home page.
  
  ( REPLY )
Orihime
August 22nd, 2009 - 17:15

How would you modify this to have it slide from the left, rather from the top?

( REPLY )
- Steve
  August 24th, 2009 - 13:26
  
  You simply have to animate the “right” position instead of “top.”
  
  ( REPLY )
Rick
August 25th, 2009 - 16:20

Wanted to let you know I used your tutorial to change my front page desin from http://www.oz2designs.com/index2.0.html to http://www.oz2designs.com

Very helpful!

Thank you,
Rick

( REPLY )
- Steve
  August 25th, 2009 - 17:01
  
  Very nice. Glad to see it put to good use!
  
  ( REPLY )
Billy Kincaid
October 12th, 2009 - 19:55

Hey, this is a cool slider. I have one small issue with it, tho.

When I’m viewing my site in Opera 10, and I click on the tab to close the panel, the Flash player inside the panel stays on-screen, while the panel closes. Is there a way around this? Thanks.

( REPLY )
shaikh farhan
March 15th, 2010 - 00:15

hi thats nice slider panel .

can u please help me out for same but on click panel should come from left .

thanks

( REPLY )
- Steve
  March 15th, 2010 - 10:55
  
  This was asked earlier, but I’ll try to explain it better. You basically have to work with the ‘right’ position instead of ‘top’ in the CSS and JS. You also have to pay attention to the width instead of height. If you look at the source code of my home page, you can see how I made it slide from the right.
  
  ( REPLY )
shaikh farhan
March 15th, 2010 - 00:18

hi slider is very cool

can u please help me for same but onclick it must come from left side

thanks

( REPLY )
Thomas
May 20th, 2010 - 05:24

Very nice, thank you for this fine tutorial. Maybe you can anwer me a question if its not to long and complicated:
How can one make a fallback if javascript is diabled.
With Click Me the link is of course opened immediately.
Thanks in advance

( REPLY )
- Steve
  May 20th, 2010 - 09:24
  
  You can replace the #panel-tab div with a link tag, then add preventDefault() to the click event handler. I’ll update the tutorial with this approach.
  
  ( REPLY )
Thomas
May 20th, 2010 - 21:14

That was easy, thanks a lot.

( REPLY )