UltraMega Blog
25Jun/0934

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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:

1
2
3
4
5
6
7
8
9
10
11
#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.

12
13
14
15
16
17
18
#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.

19
20
21
22
23
24
25
26
27
#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.

28
29
30
31
32
33
34
35
36
37
38
39
40
#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:

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#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.

Posted by Steve

Comments (34) Trackbacks (2)
  1. Can this be modified to be a small 50 pixel high tab that enters horizontally from the bottom left?

    • 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.

  2. 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.

    • 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.

  3. 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

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

  5. 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

  6. 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.

  7. hi thats nice slider panel .

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

    thanks

    • 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.

  8. hi slider is very cool

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

    thanks

  9. 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

    • 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.

  10. That was easy, thanks a lot.

  11. Thanks for this handy script, your work is very appreciated. I changed the target URL from # to ./ so the browser doesn’t display # in the url after clicking. Probably just a cosmetic thing, but I like nice looking urls 🙂

    Peace!

  12. hey, thanks alot for this tutor 😀
    can you teach me how to make panel right side like shown in your web ?

  13. Hello! Thanks a lot for nice script. It’s cool!
    And sorry for my english.

    I have a question. If i put in #panel simple feedback form:

    And then click submit button – #panel will be closed. How i can to fix this moment?

  14. It is possible to make it bounce using easing for the slide panel?

  15. This is cool.

    I have been searching for a slide in panel this past few weeks. I am trying to learn how to make a panel slide in whenver the user reaches the bottom of the page or close to the bottom. For example: http://www.theblaze.com/stories/malaysian-woman-uses-wooden-soup-ladle-to-rescue-husband-from-tiger/

    How can I get that slide in panel. Do you know Steve?

  16. Hi! This sample is great!
    I need to implement a sliding menu at the bottom of a page wich appears on mouseover and hides on mouseout.
    Has to have a visible part in wich will show the menu element corresponding to the current section of the site.
    Do you know a plugin to help me do that or a tutorial i can folow?
    Thanks!
    Very good jod.

  17. Great example…easy to understand…simple to adapt and apply…well done and thanks.

  18. can i keep the button on top as a title text when it is clicked to show entire text on slide down?

  19. I love you right now jiji…best slider explanation out there. Especially how to make it overlay and stay within a div! thanks:) Bless u!

  20. hi..im using images for the panel tab with arrows…how can i make the image arrows swap/changes when the panel is open and closed??

    Thks.

  21. Excellent post, well explained. All of the little issues like “overflow: hidden” were covered.

    Thanks!

  22. Hey,
    Great tutorial!!
    But can you tell me how to make e.g. a second tab.. I want to to a login tab and a contact info tan in the slide panel.
    Any help will be greatly appreciated!!!
    thanks:)

  23. I know this is an old thread but as a lot of people have asked about sliding in from the left hand side try this

    Slide-In Panel Demo

    #panel {
    width: 48px;
    height: 190px;
    position: absolute;
    top: 100px;
    left: -50px;
    z-index: 200;
    background-color: #868686;
    border-top-right-radius:5px;

    }
    #panel-tab {
    width: 100px;
    height: 40px;
    position: absolute;
    bottom: 0px;
    right: -40px;
    background-color: #868686;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    text-decoration: none;
    }

    #panel-tab:focus {
    outline: none;
    }

    #panel:focus {
    outline: none;
    }

    .social{
    display:block;
    }

    .social-heading {
    color: #3f4c6b;
    font-size: 15px;
    left: 1px;
    position: fixed;
    top: 290px;
    }

    #content {
    height: 1500px;
    }

    var sipPos = 0;
    $(document).ready(function() {
    $(“#panel-tab”).click(function(e) {
    e.preventDefault();
    $(“#panel”).animate({ left: sipPos }, 200, ‘linear’, function() {
    if(sipPos == 0) { sipPos = -47; }
    else { sipPos = 0; }
    });
    });
    });

    Slide-In Panel





    Social


Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.