How to create a Slide-In Panel using jQuery

Post by **Neo** » Mon Mar 01, 2010 1:20 am

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.

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 div to serve as a handle (#panel-tab) inside. We also need to include our soon-to-be-created CSS file and the jQuery library (from Google) to the head section.

Code: Select all

<!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">
      <div id="panel-tab">Click Me</div>
      <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:

Code: Select all

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

Code: Select all

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

Code: Select all

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

Code: Select all

#panel-tab {
    width: 140px;
    height: 40px;
    position: absolute;
    bottom: -40px;
    right: 0px;
    cursor: pointer;
    background-color: #000000;
}

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:

Code: Select all

var sipPos = 0;
$(document).ready(function() {
    $("#panel-tab").click(function() {
        $("#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.

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

Code: Select all

<!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>
<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
    $("#panel-tab").click(function() {
        $("#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">
      <div id="panel-tab">Click Me</div>
      <p>Panel content goes here</p>
    </div>
  </div>
</div>
</body>
</html>

Code: Select all

#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;
    cursor: pointer;
    background-color: #000000;
}

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.