Horizontal Sliding Panel
After my last few post’s on jQuery I am getting the hang of it. I want to make a jQuery sliding panel but make it a little different. I always see tutorials on sliding panels pretty much all coming from the top and sliding down into view. I don’t know about you but that’s pretty boring now, the best one I’ve seen recently is by Jon Phillips click here to view. It appears from a point behind the button then returns to that point. I want mine a bit like this but I want it to keep its fixed height as it slides into view from the left then slide back.
This has been updated please click here for the latest version
Click here to view the demo
The HTML
1 2 3 4 5 6 7 8 9 10 | <div id="panel"> <!--the hidden panel --> <div class="content"> <!--insert your content here --> </div> </div> <!--if javascript is disabled use this link--> <a href="/about.html" onclick="return()"> <div id="tab"> <!-- this will activate your panel. --> </div> </a> |
As usual its nice and simple to set up and understand the HTML. You can insert your content now or you can wait till the end, up to you. I used a mixture of images and text in my example. If the user does not have Javascript enabled we need to send them to the about page otherwise the tab is pointless.
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #tab { width:50px; height:150px; position:fixed; left:0px; top:100px; display:block; cursor:pointer; } #panel { position:fixed; left:0px; top:50px; background-color:#999999; height:500px; display:none;/*hide the panel if Javascript is not running*/ } #panel .content { width:290px; margin-left:70px; } |
Above is the basic styling for the effect. You don’t have to use the fixed property but I wanted the panel to look like it was attached the the side of the window, this might not be your taste so you can change it to absolute. If you have basic CSS knowledge all the above should be pretty easy to understand.
The Jquery
Im going to dive straight into my version with the call back functions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function(){ $("#panel, .content").hide(); //hides the panel and content from the user $('#tab').toggle(function(){ //adding a toggle function to the #tab $('#panel').stop().animate({width:"400px", opacity:0.8}, 500, function() {//sliding the #panel to 400px $('.content').fadeIn('slow'); //slides the content into view. }); }, function(){ //when the #tab is next cliked $('.content').fadeOut('slow', function() { //fade out the content $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0 }); }); }); |
I have not added comments to my last scripts but I really think it helps show what each line does. Its all explained above, you can change a few of the values but be careful when doing so, I found if you took out the opacity it was not as smooth on the sliding, so just make sure each time you change something your check your browser.
I mentioned that I used a callback function, this runs an effect once another has finished. I found with a lot of the jquery sliding panels out there they didn’t seem to care for the content. It would get squashed as the panel was sliding back, to me that does not look right. I used the callback function to handle this, once the panel had finished sliding into view the content faded in and when you closed it the content would fade then the animation of the panel would happen. I really liked this, very easy to achieve as well. Just make sure you close everything off as you go along.
In my example I have added shadows and round corners to make it look better. So here are the last finishing touches.
Last bit of styling
You can add all this to the #tab and the #panel to make it look like a little nicer.
1 2 3 4 5 6 7 8 9 | /*Rounded corners*/ -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; /*Drop shadow*/ filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties); -webkit-box-shadow: 1px 1px 5px #000; -moz-box-shadow: 1px 1px 5px #000; |
I hope this has worked and you like it. Please use it freely across your sites, I would love to see it.
Animating with webkit CSS3
I went to Europe!
Horizontal Sliding Panel v2