jQuery Sliding Sidebar

Users of Help Developer may have noticed that the design of the site changed a couple of days ago, I have had some excellent feedback and am really pleased with how it has worked out. I am aware that some of you would like to know how I created some of the effects and new features that you see on the site so I am going to produce a few tutorials showing you how to create these effects yourself with jQuery over the coming weeks.

Today I am going to show you how to create a sliding sidebar, if you want an example of what I mean then just click the button in the top right of the sidebar that says “Hide Sidebar” and you’ll notice a nice sliding action to the right and the content area expanding the full width of the page, clicking “Show Sidebar” slides everything back. This was created using the jQuery Javascript library which I must say is excellent.

Right so lets get started. I am going to use the popular template from the tutorial that was a huge success here on HD here to produce this.

-

Step 1 Setting up the files

Open the style.css and index.html files (you can download the source files if you didn’t follow the tutorial here). Next go to the jQuery site (http://jquery.com) and download the latest version of the jQuery script and save it to the same directory as the index.html file.

In the index.html file add the following under the stylesheet reference:

<script src="./jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>

Making sure that the script src links to the filename of the jQuery file (this will change in later versions so make sure you check this). All this line is doing is loading the jQuery script into your site.

-

Step 2 Setting up the links CSS

In the style.css file add the following:

a.sidebarshow {
display:none;
padding:5px;
background-color:#28607e;
text-decoration:none;
color:#FFFFFF;
float:right;
margin:5px;
}

a.sidebarhide {
display:block;
padding:5px;
background-color:#28607e;
text-decoration:none;
color:#FFFFFF;
float:right;
margin:5px;

}

a.sidebarshow:hover, a.sidebarhide:hover {
background-color:#7397d1;
text-decoration:none;
}

These are the two buttons, as you can see the sidebarshow button has been set to not display whilst the sidebarhide button is set to be visible (block). I have also added a hover effect to the buttons to give it a bit of a nicer effect.

-

Step 3 Setting up the links

Now head over to the index.html file and under the:

<div id="contentarea">

add

<a href="#" class="sidebarshow">Show Sidebar</a>

and under the:

<div id="sidebar">

add

<a href="#" class="sidebarhide">Hide Sidebar</a>

-

Step 4 Adding the Effects

Now the fun part, the jQuery. If you are new to Javascript then this may look daunting but after a while you will realise how easy it is to use, I recommend that you check out this video from CSS Tricks if you are still stuck, it’s what taught me the very basics of jQuery.

Back to the tutorial…

Create your script tags underneath the link to the jQuery script in the head of the index.html file:

<script type="text/javascript">

</script>

In between these tags add the following:

<script type="text/javascript">

$(document).ready(function(){

});

</script>

This is saying that when the document has finished loading do whatever is in the brackets.

We want to set up an action for when the sidebarhide or sidebarshow links are clicked so we create two sets of functions which look for this action:

<script type="text/javascript">

$(document).ready(function(){

$("a.sidebarhide").click(function() {

});

$("a.sidebarshow").click(function() {

});

});

</script>

Now we want to add actions in between these two functions, one set of actions for when we click sidebarshow and one set of actions for when we click sidebarhide.

First up sidebarhide, we want it to fade out the sidebar and the sidebarhide link, extend the contentarea to the full width of the page and show the sidebarshow link, so the code looks like this:

<script type="text/javascript">

$(document).ready(function(){

$("a.sidebarhide").click(function() {
$("#sidebar").fadeOut();
$("#contentarea").animate({width:"875px"});
$("a.sidebarshow").fadeIn();
$("a.sidebarhide").fadeOut();

});

$("a.sidebarshow").click(function() {

});

});

</script>

As you can see it grabs the classes and div ids for the elements and then gives it a simple action such as fadeIn or fadeOut, it also animates the movement of the right side of the contentarea as it extends.

Now we will do the opposite to the sidebarshow link which will create this:

<script type="text/javascript">

$(document).ready(function(){

$("a.sidebarhide").click(function() {
$("#sidebar").fadeOut();
$("#contentarea").animate({width:"875px"});
$("a.sidebarshow").fadeIn();
$("a.sidebarhide").fadeOut();

});

$("a.sidebarshow").click(function() {

$("#sidebar").fadeIn();
$("#contentarea").animate({width:"560px"});
$("a.sidebarshow").fadeOut();
$("a.sidebarhide").fadeIn();

});

});

</script>

-

Result

And that’s it you should now be able to click the buttons and the sidebar will hide and show depending on which button you click. There is only one problem with the template and that is that the sidebar background still shows up but I was just using this as a template, you can apply this method to any template you want just by changing a few values around. You can download the source files here, until next time please leave any comments below or if you have any questions please ask. jQuery rocks!