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>
Code: Select all
#wrapper {
width: 960px;
margin: 0px auto;
color: #FFFFFF;
}
#header {
height: 100px;
background-color: #666666;
text-align: center;
line-height: 100px;
}
Code: Select all
#content {
height: 600px;
position: relative;
overflow: hidden;
background-color: #CCCCCC;
border: 1px solid #000000;
}
Code: Select all
#panel {
width: 300px;
height: 400px;
position: absolute;
top: -400px;
left: 0px;
z-index: 200;
background-color: #333333;
}
Code: Select all
#panel-tab {
width: 140px;
height: 40px;
position: absolute;
bottom: -40px;
right: 0px;
cursor: pointer;
background-color: #000000;
}
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 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;
}
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.