How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

Aug

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

by Jon Phillips » 164 Comments » Add Your Own » grab the rss feed

Tweet More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

Horizontal sliding panels are great for many situations, but like everything else, they’re not always ideal. It depends on the project. To see what I mean by ‘horizontal sliding panel‘, go have a look at my other site Design-Newz, and click on the ‘want more‘ button that’s on the right above the navigation bar.

The Plan

So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Here’s what I had in mind (click to enlarge or check below the image for working demos):

First we’ll create the markup, then the CSS and then we’ll use jQuery to open and close our vertical sliding panel. I created 3 different demos:

Here are the files we will need for this tutorial:

index.html
style.css
jQuery library
images

1- Markup

Let’s start with the head of our document. We need to declare a doctype, write a title and link to our CSS file and to the jQuery library (we’ll let Google host the jQuery file). Later on we’ll come back to this and write our jQuery, but let’ start with just this.

< !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>Vertical Sliding Info Panel With jQuery</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
</head>
</html>

Then, inside the body of our document, we’ll create a div and give it an ID of ‘container‘. This div will hold all of our main content (Lorem Ipsum in this case) but not our sliding panel. Inside this div we’ll put a H1, H2, another div and some paragraphs. Here’s the markup:

<div id="container">
	<h1>Vertical Sliding Info Panel With jQuery</h1>
		<h2>The Sliding Panel And Trigger Button On The Left Have Absolute Positioning</h2>
		<p>This is an example of simple page that's centered and has a vertical sliding panel on the far left (try it! click on the 'infos' tab that's on the left!). We used jQuery to create this sliding panel (and CSS3 rounded corners because it looks cool)</p>
		<p><a href="http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/" title="How To Create A Vertical Info Panel With jQuery">Click here to return to the tutorial on SpyreStudios</a></p>
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
	</div>
</div>

Now after this ‘container div‘ we’ll write the markup for our vertical sliding panel and trigger button. I put some paragraphs, H3 tags and some links and unordered lists in the sliding panel.

<div class="panel">
	<h3>Sliding Panel</h3>
	<p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
	<p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

	<h3>A Little Something About Me</h3>
	<img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
	<p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div class="columns">
	<div class="colleft">
	<h3>Navigation</h3>
		<ul>
			<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
			<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
			<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
			<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
			<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
		</ul>
	</div>

	<div class="colright">
		<h3>Social Stuff</h3>
		<ul>
			<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
			<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
			<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
			<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
			<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
		</ul>
	</div>
</div>
<div style="clear:both;"></div>

</div>
<a class="trigger" href="#">infos</a>

And then we can end our document with the closing body and html tags. Now on to the CSS! :)

2- CSS

As you’ll see the CSS is pretty straight forward. I just added some CSS3 rounded corners to the main container div and to the trigger button and sliding panel. You will also notice that the trigger button and panel has absolute positioning to the left. This will place the button and panel on the left edge of the browser window.

Click here to view the demo

body {
background:#1a1a1a;
text-align:left;
color:#666;
width:700px;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

a:focus {
outline: none;
}

h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}

p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}

img {
border:none;
}

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

If you would like to place the trigger button and sliding panel on the right of the window, simply edit the a.trigger and .panel and switch ‘left‘ for ‘right‘. From this:

a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

To this:

a.trigger{
position: absolute;
top: 80px; right: 0;
}

.panel {
position: absolute;
top: 50px; right: 0;
}

And also make sure to edit the rounded corners from this:

border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

To this:

border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

Click here to view the demo

Doing this will place the trigger button and sliding panel to the right and place the rounded corners on the left instead of the right.

If you would like to get the trigger button and sliding panel to always stay visible when you scroll up and down, change the absolute positioning to fixed positioning, like this:

a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}

Click here to view the demo

Oh and if you’d like to remove the transparency of the sliding panel, simply remove or edit this part of the CSS:

filter: alpha(opacity=85);
opacity: .85;

3- jQuery

Now all that’s left to do is write our jQuery, cause if we don’t we’ll just have a useless trigger button and no sliding panel :)

Since we already wrote the markup we know that the button has a class of ‘.trigger‘ and the sliding panel has a class of ‘.panel‘. This code will go right before the closing head tag in the header section. Here it is:

< !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>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
</script>
</head>
</html>

This will tell the browser to open and close (toggle) the panel when the trigger button is clicked. It’ll also give a class of ‘active‘ to our trigger button. This will make the green plus sign switch to a red minus sign.

That was pretty easy, eh?

Download And Demos

Here are the 3 demos again:

You can also download a zip file that contains all 3 demos
(downloaded 9894 times already!)

I hope you enjoyed this tutorial! Please let me know if you have any questions and drop me a line if you end up using it (or a variation) on your own site, I’d love to see it! :)

Note: I haven’t tested the demos in IE6 so they may not work as expected. (which is kind of expected from IE6)

Secure your 1Y0-A17 cert through testking online training. Subscribe for compact training package and pass your 70-290 as well as 70-662 on first attempt.

About the author:

Jon Phillips is a designer, developer, typography lover and musician. He is also the founder of SpyreStudios.

Related Entries:

jump to the comment form ↓

Marc Bijl
August 27th, 2009

Neat stuff mate, absolutely brilliant!
The third one (on the left with fixed positioning) is just fab…

Thnx for sharing!
iPad
August 27th, 2009

Amazing and impressive, thanks for the tutorial
Adrian
August 27th, 2009

That is the best jQuery idea I’ve seen lately! The possibilities seem endless. I will definitely use a variation of this on my upcoming website redesign. Thanks, Jon!
Dave Sparks
August 27th, 2009

Very nice, thanks for the tutorial.
Oliver Web
August 27th, 2009

Thanks for this tutorial. Bookmarked this so I can come back and try it out for a new website. Thanks again.
Marek | Webcentric
August 27th, 2009

Hey Jon,

Well done for the tutorial. Its great for young guns to get into. Keep them coming.
Luci
August 27th, 2009

Great tutorial, got to love that jQuery! There is the issue of browser support with CSS3 though, always a pain! Nevertheless, they all look great in mine, thanks!
Ryan
August 27th, 2009

CSS 3 rounded corner only works on Firefox, how to get this on IE and Opera?
Aaron J Bates
August 27th, 2009

Love the idea, do you have any tips on integrating this into a wordpress site?
Vivekanand
August 27th, 2009

This is awesome enough, I have added this article on to my website that is Developer Snippets – http://www.developersnippets.c.....th-jquery/, this will help most of the developers and I would like to thank you for your valuable effort on this.

Thanks,
Vivek
[http://www.developersnippets.com]
tutorialslounge
August 27th, 2009

i must try today for my better experience and get some extra skills regarding Jquery. thanks
Edgar Leijs
August 28th, 2009

Thank you. I really may try this on my new website… Clean solution…
Puneet Mehta
August 28th, 2009

Very nice, Thanks for this tutorial, very helpful :)
webadelic
August 28th, 2009

Nice tutorial ! I’ll add this to the bookmarks!
Alex Peterson
August 28th, 2009

Awesome. I’ve been looking for something like this for ages. CSS3 though, bit early still?
Martin Sanders
August 28th, 2009

Nice idea, I’ve been considering options on how to increase our contact form accessibility, seems like a possible solution. Thanks for the tip, I’ve bookmarked the post for future reference.
Webguru
August 28th, 2009

Thanks for this great solution.

Other than that i would like to ask how can I add two slide panels into one page and use them like a tab menu. Actually, I managed it by dublicating the code and the css ids/ classes. The only problem is if one clicks on the first panel and then the another one, the previous one doesnt disappear, rather; it remains open. Is there any quick way out to fix this. All I want is if someone clicks on any links in the page or ,as in my example, on the second slide panel, the previously opened panel needs to be take its original position and hide..

Thanks.
Jon Phillips
August 28th, 2009

@all: thanks a lot for all the great comments! I’m happy you found this tut useful! :)

@Ryan: Thanks! Yep, the rounded corners won’t work in all browsers, but the design would still be very similar. This could also be done using images for the rounded corners. You could create a rounded box and make the top and bottom images as background images inside divs and you’d have rounded corners. Though for the trouble it can give you to do that, I’d just make the rounded corners in CSS3, and let people who use IE see the square corners. :)

@Aaron: Thanks! Sure, well, provided your current style.css doesn’t contain any of the classes and ids I used to create my sliding panel, you could simply copy-paste the appropriate CSS inside your style.css file, and then in your header.php (since it appears on all pages usually) you could add the whole ‘div class=”panel’ right below the body tag. Should work ok :) Drop me a line via my contact form if you run into any problems.

@Alex: I don’t think it’s too early. Safari and Firefox already play nice with CSS3. People should upgrade their old and obsolete IE6, that would help hehe

@Webguru: Good question! To be able to duplicate the panel and trigger button you’d need to edit the JS code a bit (and the CSS too I’m pretty sure). A variation of this menu (http://www.noupe.com/tutorial/.....y-css.html) could work very well, you’d just need to edit the CSS to get the menu to a left/right/fixed positioning I think. Lemme look into it and I’ll post a solution here over the week-end. :)
richard vincent
August 29th, 2009

That looks great. Thanks for posting. You’ve inspired me to upgrade my splash page to something a bit more pleasing on the eye.
cocinas baratas
August 31st, 2009

Great tips, very useful for my next websites.
Ian Mayman
August 31st, 2009

Apparently you focus on WordPress development so I would like to know how to integrate this into WordPress? Would this code need to go in every page of an HTML document where panel s to be featured? Thank you.
Webguru
August 31st, 2009

@Jon Phillips That’s great news. I am looking forward to it.

Thanks for your help.
Ronald H.
September 1st, 2009

I’m definitely going to use this in the near future. Thank you for sharing this with the public.
Marc
September 1st, 2009

Wondering if this effects SEO in any way.
Thanks
Chad
September 5th, 2009

Hi, very nice work. I couldnt resist and I did a script that uses this idea plus the jquery ui slider. Its a jquery style slider where you can use sliders to apply RGB or font size values to HTML elements. You can try it out here and download the source code, and of course use like you want: http://tympanus.net/codrops/20.....th-jquery/
Walter
September 13th, 2009

Great !! I was looking for this. Thanks
CMYK
September 14th, 2009

Greattt, thanksss !!!!
mariana
September 21st, 2009

Great tutorial Thanks!! XD
Kevin
September 22nd, 2009

Fantastic! I’ve been working on something similar for a while now (with panels on both sides) but this is more elegant than my attempt.

Do you think it would be fairly easy to move the trigger tab along with the sliding panel? In other words, after the trigger brings the hidden panel to the forefront, do you think the trigger could move with it, appearing as a tab attached to the top right (if using the left panel) of the sliding panel?

Thanks for the article!
Doc4
September 25th, 2009

Thanks for the great tutorial. Not only functional but designed well at that.
dannyboy
September 29th, 2009

hi all

i was hoping the version of the bottom of the page lol anyway nice tricks
Jason
September 30th, 2009

How would I go about making this panel automatically load once a page loads, and a user can choose to minimize it back to the side?

Any help would be greatly appreciated! Thanks!
Divakar Manikyam
October 3rd, 2009

Hi,
Thank you for giving such a feature but I need a mouse over event for this where on roll out from the pane1 the tab must be closed…can you help me with this…
Rashidi Landbrug
October 4th, 2009

Nice tut im using it now with 3 tabs under neath each other

but i want to change the jquery code to make the 2 other slides slide back when 1 is clicked so it prevents you from having the tabs open at the same time

Nonetheless great tutorial
Gregor Spowart
October 6th, 2009

Really useful. I’ll need to find a way to try it on a new website!
Naboob
October 10th, 2009

How to use with regular link or image link inside the page content etc as a trigger?

like dynamic drive anylink :)
Glennyboy
October 14th, 2009

Hi
Great Work!!!! Like Jason I’d also like to know how this coul dbe triggered to open/slide on page load. Any ideas?
Glennyboy
Glennyboy
October 14th, 2009

Ah, worked it out….

$(document).ready(function(){
$(window).load(function() {
$(“.panel”).toggle(“fast”);
$(this).toggleClass(“active”);
return false;
});
});
Justin Meyers
October 19th, 2009

Hello –

Anyone know how to use multiples of this on the same page? I cannot figure out how to keep them from stacking on each other.

Thanks!
Mike Smith
October 19th, 2009

@Justin – the a.trigger and .panel css should be duplicated (ie: a.trigger2 & .panel2) and then adjust the position’s top: px; and left/right px.
Justin Meyers
October 20th, 2009

That’s a lot of CSS, but yeah, guess that’s how it would have to be done.

Thanks!
cOdewalkz
October 22nd, 2009

I think I and webGuru has the same problem. Are there any progress in the requesT? Would like to use this in my personal website. Im currently transforming my blog into a portoflio site. Thanks a lot mate!
cOdewalkz
October 22nd, 2009

Ok, so here it is. I wanted to close the other when I open 1 link. And yes I have to duplicate the css and javascript..
Here’s a sample where I create 3 links: http://www.codewalkz.com/zone

JAVA:

$(document).ready(function(){
$(“.trigger”).click(function(){
$(“.panel”).toggle(“slow”);
$(“.panel3″).hide(“slow”);
$(“.panel1″).hide(“slow”);
return false;
});
});
$(document).ready(function(){
$(“.trigger1″).click(function(){
$(“.panel1″).toggle(“slow”);
$(“.panel”).hide(“slow”);
$(“.panel3″).hide(“slow”);
return false;
});
});
$(document).ready(function(){
$(“.trigger2″).click(function(){
$(“.panel3″).toggle(“slow”);
$(“.panel”).hide(“slow”);
$(“.panel1″).hide(“slow”);
return false;
});
});
Gina
October 23rd, 2009

This was a great tut… was very easy to follow :)

I am wondering if you might be able to help… I am using the slide in panel to hold a login control… so far so good.. however if the user enters the wrong password, is there a way to keep the panel open and only close it if it passes validation? I am extremely new to JQuery and CSS.
josydaisy
November 2nd, 2009

oooh i’m loving it. Thanks for sharing this!
Dizajn.vg
November 17th, 2009

Hello there,

just wanted to thank you for this great tutorial :D
I’ve used it on this website:

http://www.dizajn.vg

Keep up the good work :) we very much appriciate it
Louis
November 17th, 2009

Very nice effect, Jon.

One observation: It seems to me that your description of the technique is backwards, since it says “vertical sliding panel”. By that, I would assume the panel “slides vertically” (which would be “top to bottom”, as is the case on the design-newz website). In fact, this panel slides “horizontally”, with a slight vertical effect, as if it’s growing out of the little button that’s clicked. And likewise, the panel on Design Newz slides “vertically”, although you describe it as a “horizontal sliding panel”.

I think what you meant to say is “Vertically-positioned sliding panel” (on this tutorial) vs. “Horizontally positioned sliding panel” (on Design Newz).

Maybe I’m wrong, but that seems to be a more fitting way to describe what’s done here.

Thanks for a nice effect, though!
Liron
November 23rd, 2009

very nice tutorial
iam using a small 12.1 and my maximum screen resolution in 800 on 600 so in the fixed position i cant see all the menu …
Perri Mertens
November 30th, 2009

I’m using this as tabs on a catalog. http://allenamatech.com/catalog/slide.html.

I need it to be in the center of the page. I put it in a table but now the images are being bounced around. Is this not possible?
Spenser
December 24th, 2009

@ianmayman, I think it would depend on your theme but in general, you just pop this puppy into index.php and let it load as default for every post. You can then add it to page.php or any of the custom templates you create. I think that’s what you’re asking.

Great tut, easy to understand and with a free download at that! Thanks!
john
January 3rd, 2010

nice tut
alex
January 12th, 2010

nice slide panel. i have a small problem.

the panel is open if i load the page the first time. and if i click the button the panel closed. i cant find my error.
alex
January 12th, 2010

ok i fix it. here is the code:

jQuery().ready(function(){
$(“.slidePanel”).toggle();
$(“#trigger”).click(function(){
$(“.slidePanel”).toggle(“slow”);
$(this).toggleClass(“active”);
return false;
});

i add $(“.slidePanel”).toggle(); at first.
john
January 14th, 2010

mhh i have an big problem , all of this content is behind an picture on my web site but i use for this script: position: absolute; and for this image position: relative;

Thank you very much!
john
January 14th, 2010

ok, is solved with z-index: 999; , very good script!!!
denbagus
January 20th, 2010

thank you for this tutorial..
Fatih Güner
January 21st, 2010

This is an incredible post, I very much thank you for that. The simplest tutorial I choose :)
Aglan
January 31st, 2010

Thanks man, great effort and work.
Srecko Bradic
February 2nd, 2010

Wonderful demo and best at all is that it work smooth in my Opera browser :)
Brett
February 2nd, 2010

Works okay in IE6 too!
lawoman
February 2nd, 2010

I just discovered this tutorial and would like to thank you. I have seen this effect and have been wanting to incorporate it into my own site. Thanks so much.
Pedro
February 3rd, 2010

Hi,

I want to have 3, 4, 5 or more links to toggle the panel. If the page is to be dynamic (with PHP for instance) it´s hard to duplicate the CSS and the javascript based on how many links i´ll have.

So, is there a way to do this by altering the javascript code or any other way ?
It´s almost the same question as Webguru (August 28th, 2009) and cOdewalkz (October 22nd, 2009) but with the option to have how many links i want to toggle the slide panel.

Thanks in advance. Great script by the way. ;)
Aglan
February 3rd, 2010

hay again,

i really hated ie, ya sure no round corners even transparency is gone, also the effect is appear not sliding it’s ie7, searching for a fix…

Best Regards
rachman
February 4th, 2010

very very nice….thanks a lot!!!
Java developer
February 6th, 2010

Very nice. I think I will use smth like this in my next project. Thnx
ELCODIGODEBARRAS
February 7th, 2010

…Simply delicious !
Pedro
February 8th, 2010

Sorry but can you give some feedback on my question, please ?

QUOTE:
“I want to have 3, 4, 5 or more links to toggle the panel. If the page is to be dynamic (with PHP for instance) it´s hard to duplicate the CSS and the javascript based on how many links i´ll have.

So, is there a way to do this by altering the javascript code or any other way ?
It´s almost the same question as Webguru (August 28th, 2009) and cOdewalkz (October 22nd, 2009) but with the option to have how many links i want to toggle the slide panel.”
Jon Phillips
February 8th, 2010

@Pedro: Sorry for the late response. Unfortunately at the moment I can’t offer support for this. It’s provided as-is. I may be able to work on it more soon, but at the moment my schedule is very full.

If someone wants to help with it, provide fixes and improvements, or even turn this into a WordPress plugin or something like that (or if you got other ideas), drop me an email. :)
Pedro
February 8th, 2010

Ok. Thanks. If you turn up with a solution it would be appreciated.

Anyway,if someone here knows how to do it can you please post it ?

In some searches on the web i found some similarities with this script but can´t put it to work.
I think it could be acomplished by adding a REL attribute to the DIV (if it´s possible) like the following:

and then on the script:

$(“.panel[rel^='number']“).toggle(“fast”);

The ideia is to call a DIV panel per link. Each link calls it´s own panel.

ANYONE ??!!!

thanks.
Pedro
February 8th, 2010

Ok. Thanks. If you turn up with a solution it would be appreciated.

Anyway,if someone here knows how to do it can you please post it ?

In some searches on the web i found some similarities with this script but can´t put it to work.
I think it could be acomplished by adding a REL attribute to the DIV (if it´s possible) like the following:

div class=”panel” rel=”number[1]”

and then on the script:

$(“.panel[rel^='number']“).toggle(“fast”);

The ideia is to call a DIV panel per link. Each link calls it´s own panel.

ANYONE ??!!!

thanks.
Satish Borkar
February 9th, 2010

really!!! very good
thanks for sharing this i will use it my upcoming website

cheers!!
Jose Tapia
February 13th, 2010

Hi, is a really wanna thank you for your excellent article, I have a problem Im trying to have more butons to show the slide, in the javascript y put:

$(document).ready(function(){
$(“.trigger”).click(function(){
$(“.panel”).toggle(“fast”);
$(this).toggleClass(“active”);
return false;
});
});
$(document).ready(function(){
$(“.triggeruno”).click(function(){
$(“.paneluno”).toggle(“fast”);
$(this).toggleClass(“active”);
return false;
});
});

and in the css I copy/paste the same of trigger y panel to triggeruno y paneluno
Jose Tapia
February 13th, 2010

Hi, is a really wanna thank you for your excellent article, I have a problem Im trying to have more butons to show the slide, in the javascript y put:

$(document).ready(function(){
$(”.trigger”).click(function(){
$(”.panel”).toggle(”fast”);
$(this).toggleClass(”active”);
return false;
});
});
$(document).ready(function(){
$(”.triggeruno”).click(function(){
$(”.paneluno”).toggle(”fast”);
$(this).toggleClass(”active”);
return false;
});
});

and in the css I copy/paste the same of trigger y panel to triggeruno y paneluno

but if click in the second text with triggeruno, the slide don’t appear, only if i clicked in the firt text of trigger.

Anybody has a idea??, thanks a lot for your time
Lynne
February 14th, 2010

Fantastic article – I searched everwhere before finding this and it’s exacly what I was needing. Thanks for sharing.

Really easy to integrate..now…let’s see if I can get it pulling our Twitter feed!
xela
February 21st, 2010

I have a probleme to set the panel to the right site of the window. I change the CSS to this:
.panel {
position: absolute;
top: 50px; right: 0;
}

It works fine. But if i add the doctype:

then the panel appears on the left side.

Can someone help me please?
Claudia
February 21st, 2010

Just wanted to let you know how much I appreciate you making this available! This is exactly what I needed. Between studying the code and reading the comments from various posters, I was able to implement this on my WordPress theme. Thanks again!
Amber Sjomeling
February 21st, 2010

just out of curiosity, could this be edited to work horizontally as well? i love the concept, but have a horizontal site designed and this could be really awesome with it.
antonio ramirez
February 24th, 2010

Exactly what I need it!!! I am going to implement it on my website with your permission!!

Thank you very much!
antonio ramirez
February 24th, 2010

By the way! Do not worry about Internet Explorer… I don’t support Internet Explorer AT ALL! They deserve it due to their security pitfalls and horrible JS and CSS engines!

Thanks again!
Federica Sibella
February 25th, 2010

Hi Jon,
the tutorial is very easy to follow and I’m planning to use your panel for a client of mine (with your permission).

Just one comment on IE (tested in IE8 till now): to see the icon change from the green + to the red – in the CSS you have to write “a.trigger.active” instead of “a.active.trigger”.

There are also some little issues with transparency: I’m gonna try some hacking and then I’ll let you know if you are interested.
Thanks!
Shaun McCran
February 26th, 2010

Hi,
Great tutorial, thanks, I was using something similar to .append() a div to a floating area, but adding content to it wa a nightmare due to some sort of whitespace issue.

This works a treat tho. Would be quite nice if there was a stripped down “clean” demo, with just the functionality rathern than super css.

Thanks
Shaun
arne
March 2nd, 2010

hi hon! really great tutorial! i’m a webdesign rookie, and i used the panel as a menu, along with some little adjustments, on my first and own website! checkt it out: http://www.arneuebel.com!
thanks a lot and best greetings from germany!!
Jon Phillips
March 2nd, 2010

Hi everyone! First of all, thanks a lot for all your comments, much appreciated!

I’m sorry I’m not able to provide support for this sliding panel. I thought I’d mention it here, especially since I’m receiving quite a lot of emails with questions on how to do this and that. Unfortunately I cannot help everyone and reply to all your questions. (I wish I could though)

BUT, I’m working on another tutorial which will include fixes and tips to address the most frequent questions I’m getting. Stay tuned! :)
Federica Sibella
March 3rd, 2010

Hi Jon,

I solved the little opacity issue: in IE (I tested 7 and 8) the sliding box had solid color instead of some transparency. It is probably due to the toggle() in jQuery. My workaround was:

$(document).ready(function()
{
$(“.trigger”).click(function()
{
//$(“.panel”).toggle(“fast”);
$(this).toggleClass(“active”);
if ($(this).hasClass(“active”)){
$(“.panel”).css(“display”,”block”);
}
else
{
$(“.panel”).css(“display”,”none”);
}
return false;
}
);
}
);

It works fine both in IE 7 and 8 (and FF of course!). I hope this helps!
Indialike
March 12th, 2010

Very nice and useful tutorials for web designers,
Thanks for posting.
Szabi
March 13th, 2010

I just added this to my new project. It was more easy than I expected. Thank you very much for putting this tutorial together. I’m sure you have helped a lot of people with it.
Ahmad
March 17th, 2010

well, i dont think saying thanx would be enough jon. but thanx.
am working on “more than one trigger and panel” issue and i will post it when its done.

10 to the power 89632478293 thanx to you.
Jon Phillips
March 17th, 2010

@Frederica: Sweet! Thanks! I’ll make sure to include this in the ‘revision’ post once I’m done writing it (with credit to you of course) :)

@Szabi: You’re welcome! I’m happy you used it!

@Ahmad: You’re more than welcome! Make sure you drop me an email, I’d love to see what you come up with. And of course I’ll make sure to include it in the next version of the sliding panel :)
Ahmad
March 17th, 2010

ok thanx for you help cOdewalkz OCTOBER 22ND, 2009
i uploaded an example at http://www.wazeen.com/sp/
there is 2 more issues now:
1. the Plus and Minus icons.
2. when panel2 slides out, trigger1 become under it and cant be clicked. same for panel1 and trigger.

the icons is not important cause i can remove them. but i need the panel to slide out in the same position for all triggers. am working on a fix.

regards
Schrumpfschläuche
March 17th, 2010

Very great work. thx a lot. I need a slide next time for my header website.
Derrick Workman
April 8th, 2010

A seriously awesome tut. Used it in the company page. Thanks a bunch for the effort you put into the tut!
Adam Hermsdorfer
April 11th, 2010

Love this jQuery plugin. Just a quick tip that to if you are running any other jQuery plugin’s on a page and the toggles are conflicting, you may want to change the .toggleClass to .showClass. This might remove some conflict…it worked for me!
jason
April 14th, 2010

This is great, thanks for the easy to follow tutorial…
Jeff
April 21st, 2010

Awesome! Added this to the right side of my master page of an vb.Net website I’m working on. Works and looks great.

Too bad it doesn’t render/work the same in IE8 and Opera 10.51 (which surprises me) as it does in Chrome and Firefox; so much better in the later two.

Added a shadow around the panel which adds a nice touch as well; using a different color scheme than your example site. Add this to the .panel entry of your css file too add a gray shadow:
-moz-box-shadow: 0px 0px 15px 15px #777;
-webkit-box-shadow: 0px 0px 15px 15px #777;
Web Design
April 22nd, 2010

Very Nice tutorial thanks I always need to know need stuff using jquery we all use it and it looks awesome
Abhijeet
April 28th, 2010

This is really SEXY gizmo for website. Thankx Jon
Soam
May 2nd, 2010

Hi…
I was just trying to get this up and it works fine.
But when I have a flash slideshow just below the main navigation menu bar, then this sliding panel go behind that.
How to solve this ?
Jenny
May 15th, 2010

this is awesome and exactly what I was looking for. Thanks for this :D
Jorge Andrés Cañón Sierra
May 18th, 2010

Recomiendo:

…
$(this).toggleClass(“active”);
return false;
…

Se coloque

…
$(this).toggleClass(“active”);
$(this).blur();
return false;
…
Catherine Azzarello
May 19th, 2010

Hi Jon,

I’m working on the redesign of my site. First up, getting all the scripts working. So far, so good. Am using your sexy vertical sliding panel. It works really well in FF, Chrome and Opera on my Macs. But it crashes Safari every time. Go figure!

Anyway, I’ve filled out an Apple report. Was wondering if you’ve heard of any similar experience? Here’s my development link: http://www.azzcatdevelopment.com/Azzcat2010/

Open and close the content button two times. First open/close works fine. Second time only displays a fraction of the panel and when you click on ‘contact’ to close, Safari crashes with ~2 seconds.

I’ve tested it with other jQuery functions removed and it still crashes.

If you or your readers have had a similar experience, I’d love to hear about it.

Thanks!
Louisa
May 24th, 2010

Brilliant tutorial and sliding panel!!!!! But.. I’ve also having safari issues! I’m glad Catherine mentioned it because I was actually beginning to think it was just my mac having a really bad week! My panels work really well in firefox but on a second click in safari (only when the code is implemented into wordpress) it stalls then crashes! My code…

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(“.trigger”).click(function(){
$j(“.panel”).toggle(“fast”);
$j(this).toggleClass(“active”);
return false;
});
});

Thanks for any help anyone can steer my way!!!
Louisa
May 24th, 2010

@ Catherine… I just went to your website and noticed your using an email form inside your sliding panel… so am I and I think that may be the problem. I’m using contact7 which I just removed and all is now working perfectly!
anarchoi
May 28th, 2010

hey,

cool blog and useful script !

but how can i include a iframe inside the panel ? the button disseapear each time i try to put an iframe !!

thanks a lot
Sivaranjan
May 28th, 2010

This is incredibly useful ,will soon be using this in one of my projects.I am taking the liberty of adding this article to my css aggregator site at CSSFind.com. Hope thats ok with you.
Catherine Azzarello
June 1st, 2010

@Louisa
Thanks, but still having issues:
I removed all other scripts…not the problem.
I removed the form and replaced w/simple paragraph…still not the problem.
This is a static page, so I cannot use the Contact7 WP plugin.

Have had others test the site and the problem squarely seems to be on the 2nd click open, .panel does not fully open. On the 2nd click close, Safari crashes. Every time.

I’m working on Leopard. Wonder if that’s the problem. Crashes both my Macs.

@Jon
It would be really sweet if you implemented subscribe to comments. ;-)
Thanks!
David Lambert
June 4th, 2010

This worked great for a project that I’m working on. I was able to easily modify it to fit my needs. It has worked great in all the major browsers that I have tried without any problems. Thanks for the great and easy to follow tutorial.
Roelf
June 14th, 2010

@Jon Phillips
I’d like to suggest you to update this post to use the official/final code for the css3 functions. That means without the -moz or -webkit prefixes.

That way the code will be working in all future webbrowsers and it would also help those people asking why it doesn’t work in the Opera webbrowser. (they don’t wanne rely on prefixes.)

@all General info:
These css-prefixes are meant for use with functions that not standard css, the use in this situation (well previous situation) for not finished css property’s is correct. But don’t forget that this is just a themorary solution for testing.
(Or if you want to make a page just working in one browsers, like safari’s html 5 showcase)
Elijah
June 18th, 2010

Thanks! really very useful for my development projects,
darth scripter
June 27th, 2010

POINTER: replace the trigger with the following:

info&lt/h1>

if it is just a bunch of random characters, load it up in a browser, and then copy and paste.
what it does? if the user does not have javascipt on or supported, then they follow a LINK instead of just nothing happening.
Horse
June 30th, 2010

@Kevin: I have been trying to achieve the same thing, eg, making the trigger move with the panel, did you ever accomplish this?

As having scoured the comments I cant see anyone else requesting or implementing this.

Anyone? And will post the solution if I find it :)
Horse
June 30th, 2010

Well.. I already have a solution, simply adding

a.active.trigger {
right: 360px;
}

will do it, however the sync between toggling the position of the trigger and the panel isnt very elegant, and one appears to go before the other. Its just a case of getting them to work smoothly
uxepiipexu
July 4th, 2010

Love the sexy panels. I recently moved into “abstract” site design, experimenting with CSS.
And implemented 2 panels thus far. Albeit, will customize them as time goes on.
Thank you so much !!!
Beben
July 10th, 2010

its cool…wow yeah :-bd
AJ
July 12th, 2010

This is so awesome. I just need to figure out how to integrate on my site. Kudos!
Ramesh
July 20th, 2010

That is the best jQuery idea I’ve seen lately! The possibilities seem endless. I will definitely use a variation of this on my upcoming website redesign. Thanks
mark williams
July 27th, 2010

Hi there

I am taking a tranning course and really like web design. I was wondering if it was posible to have this effect but with mutible tabs lining both the left and right sides of the screen as a page layout with the content inside of them with just a background image in the body and no content in the body only in tabbed section. Have been trying to fiddle with the code but cant find any way to do it?

Also provided my first site as web site and no one out side my friends and family have viwed it yet. If you have time could you please look it over and give me feed back?

By the way good turotial.

Thank you for your time

Mark Williams
Theresa
July 28th, 2010

Exactly what I was looking for. Thank you!
Poppoll
July 30th, 2010

@Ahmad
Have a look here: http://fotoweben.be/SlidingInfoPanel/
Working demo 3 triggers.

Poppoll
rezvan
August 1st, 2010

Hi, I try to slide trigger button with panel together.when click on trigger button it slide with panel.could you please guide me ,how to do it?
Alain
August 2nd, 2010

Awesome snippet of code. It really is useful and beautiful. Thank you for sharing this, it really helped :)
paul
August 5th, 2010

lovely little tute, i am having one problem, my page does not load in safari after adding this feature, all working perfectly in firefox, any ideas?

Thanks in advance
paul
August 6th, 2010

lovely little tut, having a small problem with safari, for some reason when the webpage is viewed in safari the page is just blank with nothing appearing
wahid polin
August 8th, 2010

Thnx for this tutorial.I have just successfully implemented it on my site.
khaled
August 10th, 2010

Nice post bro.. CSS3 is new generation for design web
And when it was merged with jquery have started conquering the web. They both combine to produce great functions and effects and really make our eyes wide opened.
The information provided by you is very good,is very excellent.For that I need to say that I am very grateful to the information you share through your blog. good luck with you.
Regards
Werner
August 15th, 2010

Great Sliding Panel

@ see: http://www.gold-gold-gold.de/cost-average-effect

in my footer is a Link for you.

cheers

Werner
Zach
August 17th, 2010

Perfecto! This EXACTLY what I’ve been searching for, dude, thanks for the great tut!
delite
September 8th, 2010

I love this slider, and have used it many times, but I want to have a left and right on the same page. What would be the best way to do this?