- a developer's blog

Tutorial: Simple SliderPanel Dropdown in Jquery

Jquery Slider PanelWe do this short and sweet tutorial on how to build your own slider panel with jQuery.

Before you begin with the the tutorial, click here for a demo of what we will be creating.For this example, we have included a sample login form into the panel but you can include any form, image, or text based content (just about anything) in the panel area.

Nothing fancy there, but simplicity all over.

The HTML markup

Embedding Javascript

In the HTML markup, we have already included link to the jQuery Library.
Within the body tag, we have also invoked two javascript functions onclick=”show(‘login_box’);” and onclick=”hide(‘login_box’);”. Its time to define these two functions in our custom java script code.

function show(a) { $("#"+a).show()}
function hide(a){$("#"+a).hide()}

These two functions are actually pretty simple. Both the functions take one parameter ‘a’ and add a div id element(#) to it. The show function shows the content within the div and the hide function (guess what ?) hides the content within the div element.

In our html above, we pass the parameter ‘login_box’ to both these functions above. Thus anything placed between the div id ‘login_box’ (#login-box) can be shown and hidden and that is what constitutes our sliding panel.

This brings us to next part where we define the CSS markup for #login-box. The CSS markup for all other elements is just supportive to make the overall thing look good.

CSS Markup

// our primary css markup to make it functional
//mark display:none which ensures that the panel content is not visible
//when the webpage is first rendered
#login_box{  display: none; position:absolute; padding: 10px; 
background:#fff; width:350px;right:-6px;top:-6px}

// we include the login-box in another containing div class login panel
//mark the use of z-index to ensure that the panel slides above 
// any other webpage content
.login_panel {float:right;  position: relative;  
z-index: 9999;  display: hide; }

//other supportive css
.login_text{ color: green; font-size: 14px; float:left;  margin: 3px 3px 0 0; 
cursor: pointer; display:block}
.grey_box { background: #e9e9e9; margin: 1px 5px 0 0;  cursor: pointer; 
display:block; float:right; padding: 5px; }
.green_dwn_arrow{background:url(down.gif) no-repeat; 
height:9px; width:8px;font-size:0;}
.green_up_arrow{background: #e9e9e9 url(up.gif) no-repeat; 
height:9px;width:8px;font-size:0; float:right;  }
.mylabel {width: 105px; float:left; font: 14px; 
color: grey; margin: 5px 0 0 0 0;}
.input_box{ margin: 4px; }
.green_btn { color:white;  font: 14px; 
font-weight: bold; padding: 4px; float:left; width:80px; background:green;}
.forgot { color: grey; margin: lpx 5px 5px 10px; float:right; 
font-weight: bold; font-size: 10px;}

That is it ! Please leave your comments, suggestions and feedback using the comment form below.

You can download the source code for this tutorial here and view the demo here.