hi All

Was just think about making a slide out drawer, which could be used for any purpose, like I am using it to show my social connections (Contact Me tab on the right bottom corner of the page). Well this is a pretty straight forward tutorial and will result in a tab displaying from the end of the page which can be clicked to open a div like a drawer and view stuff there.

Remember this code can be played around in the Fiddle mentioned at the end of this article and can be made to display from almost any edge of the page. While looking for a similar solution I could not locate a specific tutorial doing just this. You can also use an image in place of the pull tab and can also make it as small as an arrow to display the pull functionality.

The code here is the exact same used on my website. Without wasting any time let's get started with the html structure for this first.

STEP 1: HTML

the code would look something like this:

<div id="sidebox">
    <div id="sidebox_tab"><b>Contact Me</b></div>
    <div id="sidebox_content">
        <p>Random text here.</p>
    </div>
</div>

STEP 2: CSS

the style for this would look something like this and can be modded as per your requirement:

#sidebox {
    position:fixed;
    bottom:-200px;
    right:10px;
    width:150px;
    height:230px;
}

#sidebox .content {
    float:bottom;
    width:150px;
    height:200px;
    background:transparent;
}

#sidebox .tab {
    cursor:pointer;
    float:top;
    width:150px;
    height:30px;
    background:#356AA0;
    text-align: center;
    line-height: 30px;
    border-top-left-radius: 20px;
    border-top-right-radius:20px;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    color: white;
}

STEP 3: jQuery event

well this is even simpler:

$('#sidebox .tab').toggle(function(){
    $('#sidebox').animate({'bottom':0});
}, function(){
    $('#sidebox').animate({'bottom':-$('#sidebox_content').height()});
});

You would have something like the contact me box on the right side of the page or you can play around with this fiddle

Cheers!

Happy Hacking Stuff!