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:
- Vertical sliding panel and open/close trigger button on the left with absolute positioning
- Vertical sliding panel and open/close trigger button on the right with absolute positioning
- Vertical sliding panel and open/close trigger button on the left with fixed positioning
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.
[html]
< !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>
[/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:
[html]
<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>
[/html]
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.
[html]
<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>
[/html]
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.
Visit PsPrint Online Printing and learn how you can create effective and excellent-looking business cards.
[html]
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;
}
[/html]
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:
[html]
a.trigger{
position: absolute;
top: 80px; left: 0;
}
.panel {
position: absolute;
top: 50px; left: 0;
}
[/html]
To this:
[html]
a.trigger{
position: absolute;
top: 80px; right: 0;
}
.panel {
position: absolute;
top: 50px; right: 0;
}
[/html]
And also make sure to edit the rounded corners from this:
[html]
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;
[/html]
To this:
[html]
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;
[/html]
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:
[html]
a.trigger{
position: fixed;
top: 80px; left: 0;
}
.panel {
position: fixed;
top: 50px; left: 0;
}
[/html]
Oh and if you’d like to remove the transparency of the sliding panel, simply remove or edit this part of the CSS:
[html]
filter: alpha(opacity=85);
opacity: .85;
[/html]
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:
[html]
< !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>
[/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:
- Vertical sliding panel and open/close trigger button on the left with absolute positioning
- Vertical sliding panel and open/close trigger button on the right with absolute positioning
- Vertical sliding panel and open/close trigger button on the left with fixed positioning
You can also download a zip file that contains all 3 demos
(downloaded [download#4#hits] 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)
You can also try checking out PHP hosting reviews here. Reliable cloud servers – the perfect storage for your creativity, be it apps, files or websites.
Neat stuff mate, absolutely brilliant!
The third one (on the left with fixed positioning) is just fab…
Thnx for sharing!
Amazing and impressive, thanks for the tutorial
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!
Very nice, thanks for the tutorial.
Thanks for this tutorial. Bookmarked this so I can come back and try it out for a new website. Thanks again.
Hey Jon,
Well done for the tutorial. Its great for young guns to get into. Keep them coming.
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!
CSS 3 rounded corner only works on Firefox, how to get this on IE and Opera?
Love the idea, do you have any tips on integrating this into a wordpress site?
This is awesome enough, I have added this article on to my website that is Developer Snippets – http://www.developersnippets.com/2009/08/27/excellent-vertical-sliding-info-panel-with-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]
i must try today for my better experience and get some extra skills regarding Jquery. thanks
Thank you. I really may try this on my new website… Clean solution…
Very nice, Thanks for this tutorial, very helpful :)
Nice tutorial ! I’ll add this to the bookmarks!
Awesome. I’ve been looking for something like this for ages. CSS3 though, bit early still?
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.
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.
@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/drop-down-menu-jquery-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. :)
That looks great. Thanks for posting. You’ve inspired me to upgrade my splash page to something a bit more pleasing on the eye.
Great tips, very useful for my next websites.
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.
@Jon Phillips That’s great news. I am looking forward to it.
Thanks for your help.
I’m definitely going to use this in the near future. Thank you for sharing this with the public.
Wondering if this effects SEO in any way.
Thanks
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/2009/09/06/dynamically-changing-style-with-jquery/
Great !! I was looking for this. Thanks
Greattt, thanksss !!!!
Great tutorial Thanks!! XD
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!
Thanks for the great tutorial. Not only functional but designed well at that.
hi all
i was hoping the version of the bottom of the page lol anyway nice tricks
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!
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…
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
Really useful. I’ll need to find a way to try it on a new website!
How to use with regular link or image link inside the page content etc as a trigger?
like dynamic drive anylink :)
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
Ah, worked it out….
$(document).ready(function(){
$(window).load(function() {
$(“.panel”).toggle(“fast”);
$(this).toggleClass(“active”);
return false;
});
});
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!
@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.
That’s a lot of CSS, but yeah, guess that’s how it would have to be done.
Thanks!
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!
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;
});
});
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.
oooh i’m loving it. Thanks for sharing this!
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
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!
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 …
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?
@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!
nice tut
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.
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.
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!
ok, is solved with z-index: 999; , very good script!!!
thank you for this tutorial..
This is an incredible post, I very much thank you for that. The simplest tutorial I choose :)
Thanks man, great effort and work.
Wonderful demo and best at all is that it work smooth in my Opera browser :)
Works okay in IE6 too!
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.
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. ;)
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
very very nice….thanks a lot!!!
Very nice. I think I will use smth like this in my next project. Thnx
…Simply delicious !
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.”
@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. :)
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.
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.
really!!! very good
thanks for sharing this i will use it my upcoming website
cheers!!
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
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
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!
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?
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!
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.
Exactly what I need it!!! I am going to implement it on my website with your permission!!
Thank you very much!
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!
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!
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
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!!
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! :)
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!
Very nice and useful tutorials for web designers,
Thanks for posting.
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.
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.
@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 :)
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
Very great work. thx a lot. I need a slide next time for my header website.
A seriously awesome tut. Used it in the company page. Thanks a bunch for the effort you put into the tut!
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!
This is great, thanks for the easy to follow tutorial…
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;
Very Nice tutorial thanks I always need to know need stuff using jquery we all use it and it looks awesome
This is really SEXY gizmo for website. Thankx Jon
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 ?
this is awesome and exactly what I was looking for. Thanks for this :D
Recomiendo:
…
$(this).toggleClass(“active”);
return false;
…
Se coloque
…
$(this).toggleClass(“active”);
$(this).blur();
return false;
…
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!
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!!!
@ 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!
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
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.
@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!
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.
@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)
Thanks! really very useful for my development projects,
POINTER: replace the trigger with the following:
h1 a href=’infopage.*’ onClick=’return false;’ rel=”nofollow” >info /a /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.
@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 :)
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
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 !!!
its cool…wow yeah :-bd
This is so awesome. I just need to figure out how to integrate on my site. Kudos!
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
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
Exactly what I was looking for. Thank you!
@Ahmad
Have a look here: http://fotoweben.be/SlidingInfoPanel/
Working demo 3 triggers.
Poppoll
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?
Awesome snippet of code. It really is useful and beautiful. Thank you for sharing this, it really helped :)
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
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
Thnx for this tutorial.I have just successfully implemented it on my site.
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
Great Sliding Panel
@ see: http://www.gold-gold-gold.de/cost-average-effect
in my footer is a Link for you.
cheers
Werner
Perfecto! This EXACTLY what I’ve been searching for, dude, thanks for the great tut!
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?
Absolutely amazing tutorial.Great great great..thanks alot.
Very cool idea and implementation. I enjoyed reading all the comments. Others have done awesome in expanding it. This is exactly what I was searching for today
Hi everyone, 10x for this amazing tutorial !!!
Im trying to put it on my wordpress website but my wordpress css change when i put the code of the panel !
Can you tell me hw to fix it with wordpress please !
10x from france ;-)
great!
how can I put 3 info links? would it be 3 triggers?
how can I do it?
Awesome! Thanks!
Hi,
I found this article really intersting, but I cannot find a way to get the “Lost Focus” event on the panel.
I tried binding .blur and .focusout event on .panel, but no success.
What i want to do is to close the panel when i click outside the panel.
Any idea would be appreciated.
Thanks,
Marco
Am I right that this panel is not supported by IE6? Can I make it happen? Thanks for any info on that.
thanks a lot men ..that’s a great job .thanks again
very cool – thanks for the tutorial!
Great work, looks cool, thanks for sharing the brilliant work.
Hello,
Did you every create this demo using 2 sliding panels that both slide in at once. I am new to jquery and that is the functionality that I am looking for. Even if you could steer me in the right direction for making the changes myself that would be great.
Thank you!
Pat Parker
Thanks for this detailed tutorials. I’m not really good in jquery since I have limited knowledge of it. This can help newbies and others like me to have the clear picture on how to start things.
Hello, I can not install this plugin on my blog (wordpress). When I install, it says it has no valid header! How do I install this plugin on my blog? Thank you. Dyego.
@Dyego: it’s not a WP plugin, so unfortunately you cannot simply ‘install’ it like you would a normal plugin – you’d need some knowledge of CSS, HTML and jQuery.
bro anyway to use this to work in ie6?
Very nice.
Very nice effect! Will come in very nicely on our 2011 site re-launch. Took the inspiration and made it a bit more minimal to match the motif. This was by far the greatest tut on the subject I could find after a long search for the nicest presentation of a slide out div. Really would like to know if anyone figured out how to hide on blur!!!
Just wanna mention that this script did not appear to work on pages with the popular Lightbox script. Seems to be incompatible and I’m not sure why…
Well done!
Man that was really mindblowing. Loved it.
I prefer toggle(“slow”) to toggle(“fast”). That is matter of taste.
Great and thanks
I have used this panel at my site. I like it. Thanks a lot, Jon.
This is great! I’ve been looking for a way to have a side menu that stays out of the way, but when opened, can expand over top of the existing content without wreaking havoc on the layout of the page. This panel system works beautifully. I’m working on a redesign of my school’s website (Briercrest College and Seminary), and am happy to incorporate this problem-solving solution! (http://www.briercrest.ca/redesign). Thanks!
I’m wondering this, too. I’m new to jquery and using this as a tutorial, but if I have a bunch of trigger buttons, I haven’t figured out how to tell the code which button goes to which panel.
OK, I think I could make this work if I knew how to trigger on a div’s ID instead of its class. searching….
Sweet tutorial. I just made a version with two panels, controlled by one button, with different slide animation styles. Also made them close whenever you click outside of the panels.
anybody try to get this to work in IE? I need help.
thanks
Thanks for the great tutorial! Was wondering, is there a way where to set the javascript so that “.panel” is open when the page first loads? Also, how would I alter the animation so that “.panel” fades in, or slides in? any help would be appreciated!
yes, working in [email protected] same as like FF and chrome!
sorry if you already answered this, but how could i get more than one of these sliding panels to work on a page?
Thank you for this very good trick! I try it just right now!
for the opening on page loading, here:
$(“.panel”).show();
for the sliding, try fadeToggle() in the place of toggle()
This is very good stuff – well done and thanks :)
i got it working but im integrating more than one panel in the website (various navigation options), when you click on one panel it opens and then if you click on another the other one opens also, leaving the first one open. Does anyone know how to make it so once you click out of a panel it closes so another can open?
plz will some one give any suggestion as how to modify yhe code so as to get it work in IE browsers
Thanks for the super tut explaining this cool sliding panel.
I have it working, but I would also like some help. I have the same wish as Tim Myers. I have 3 panels, it would be great when a panel is already open, then when another panel is clicked/opened the first panel could be closed with the same click.
Many thanks
This is so cool man. Quick question though. I would like my info box stay on top of my page content. Right now, when I click the expand button, the content of the infobox is displaying underneath all the page content. They overlap. Thanks.
I got it: z-index:1
Nice tut, thanks! I altered the jQuery function a bit; the panel is now shown when page is loaded and clicking outside the panel will close it:
jQuery(function($) {
$(document).ready(function(){
$(".panel").show();
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
});
jQuery(function($) {
$(document).ready(function(){
$('body').click(function(){
$(".panel").hide("fast");
$('.panel').click(function(event){
event.stopPropagation();
return false;
});
});
});
});
I so enjoyed every bit of this site and I’ve bookmarked your blog to keep up with the new topics you will post in the future.
You made some respectable factors there. I appeared on the web for the problem and found most individuals will associate with with your website.
Greetings, It is a great job. i really like it but it is not W3C valid CSS AND is it possible to use two tabs at the left side ( at the same time) Thank you very much
Thanks for this tutorial sir. This is the most straight forward, amazing tutorial i’ve found for creating vertical sliding panels. Great job!. I just have a question though, after all the codings have been made. How would I be able to install the codes into my site and make it work. I just can’t figure out how. I am using a free platform blogspot and I tried to put the codes right into my template through Design> Edit HTML > and then i paste the code into the head tag. But it’s not working and it breaks my site’s layout.
I really wanted to have this feature running on my site. Can you please help me with this one? or anyone else knows how? Please help me guys. Thanks
Thanks for this tutorial… The site is in Hebrew but I think you will manage to find your great jQuery & CSS slider,
Thanks again,
Tomer
Great tutorial and great end product – W3C valid too which is always a bonus =].
Cheers!
Thanks for this wonderful tutorial
Still looking good 2 years down the line. At least IE9 is supporting CSS3 – make our lives easier as web designers. Just need everyone to stop using IE6!
Hi.
This script is amazing. Congratulations.
I used with a little adpts, to show banners at the load of my homepage.
I was trying to toggle the Slide Panel using a link inside the panel.
I got.
To hide the Sliding Panel from a link inside himself use this function:
function closeSlidePanel(){
$(document).ready(function(){
$(‘body’).click(function(){
$(“.panel”).hide(“slow”);
return false;
});
});
}
and in the link inside the panel use:
Close [x]
This way you can put a link “close” inside the panel and not only the trigger button.
Nice post! Loved reading it this tutorial, could come handy some day!
Awesome man. Really. And moreover tuts u gave was fabulous. Coz i didnt know much about css can do such things. u tought me that. Thanks…
Thank you… i was wonder for some time how to do that! Thank you for sharing with us!
This is great! I do however have a question..
How can I instead of using an image of the plus and minus, use an ascii code via the css to insert a symbol such as + and − so that when a user click on the plus it turns into a minus and vice versa
Any help from anyone would be greatly appreciated.
^^ Hi Chugy,
In terms of using ascii codes – these are used in HTML and not CSS. Simply do a Google search to find the ones you’re looking for.
Thanks for sharing the code… I was looking for the thrid one… :)
This no longer works. The google cdn is no longer there.