SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

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

August 27, 2009 by Jon 183 Comments

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):

Vertical Sliding Panel With jQuery And CSS3

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.

Click here to view the demo

[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]

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:

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

.panel {
position: fixed;
top: 50px; left: 0;
}
[/html]

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:

[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.

Filed Under: CSS, Design, jQuery, Tutorial

Comments

  1. Marc Bijl says

    August 27, 2009 at 3:14 am

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

    Thnx for sharing!

  2. iPad says

    August 27, 2009 at 3:17 am

    Amazing and impressive, thanks for the tutorial

  3. Adrian says

    August 27, 2009 at 4:39 am

    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!

  4. Dave Sparks says

    August 27, 2009 at 5:02 am

    Very nice, thanks for the tutorial.

  5. Oliver Web says

    August 27, 2009 at 8:43 am

    Thanks for this tutorial. Bookmarked this so I can come back and try it out for a new website. Thanks again.

  6. Marek | Webcentric says

    August 27, 2009 at 11:38 am

    Hey Jon,

    Well done for the tutorial. Its great for young guns to get into. Keep them coming.

  7. Luci says

    August 27, 2009 at 12:12 pm

    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!

  8. Ryan says

    August 27, 2009 at 12:53 pm

    CSS 3 rounded corner only works on Firefox, how to get this on IE and Opera?

  9. Aaron J Bates says

    August 27, 2009 at 1:21 pm

    Love the idea, do you have any tips on integrating this into a wordpress site?

  10. Vivekanand says

    August 27, 2009 at 3:07 pm

    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]

  11. tutorialslounge says

    August 27, 2009 at 11:26 pm

    i must try today for my better experience and get some extra skills regarding Jquery. thanks

  12. Edgar Leijs says

    August 28, 2009 at 1:23 am

    Thank you. I really may try this on my new website… Clean solution…

  13. Puneet Mehta says

    August 28, 2009 at 1:48 am

    Very nice, Thanks for this tutorial, very helpful :)

  14. webadelic says

    August 28, 2009 at 4:23 am

    Nice tutorial ! I’ll add this to the bookmarks!

  15. Alex Peterson says

    August 28, 2009 at 10:54 am

    Awesome. I’ve been looking for something like this for ages. CSS3 though, bit early still?

  16. Martin Sanders says

    August 28, 2009 at 7:37 pm

    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.

  17. Webguru says

    August 28, 2009 at 8:27 pm

    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.

  18. Jon Phillips says

    August 28, 2009 at 8:50 pm

    @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. :)

  19. richard vincent says

    August 29, 2009 at 4:17 am

    That looks great. Thanks for posting. You’ve inspired me to upgrade my splash page to something a bit more pleasing on the eye.

  20. cocinas baratas says

    August 31, 2009 at 3:48 am

    Great tips, very useful for my next websites.

  21. Ian Mayman says

    August 31, 2009 at 4:41 am

    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.

  22. Webguru says

    August 31, 2009 at 7:14 pm

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

    Thanks for your help.

  23. Ronald H. says

    September 1, 2009 at 3:40 pm

    I’m definitely going to use this in the near future. Thank you for sharing this with the public.

  24. Marc says

    September 1, 2009 at 4:15 pm

    Wondering if this effects SEO in any way.
    Thanks

  25. Chad says

    September 5, 2009 at 8:28 pm

    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/

  26. Walter says

    September 13, 2009 at 6:32 pm

    Great !! I was looking for this. Thanks

  27. CMYK says

    September 14, 2009 at 7:37 am

    Greattt, thanksss !!!!

  28. mariana says

    September 21, 2009 at 6:05 pm

    Great tutorial Thanks!! XD

  29. Kevin says

    September 22, 2009 at 11:14 am

    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!

  30. Doc4 says

    September 25, 2009 at 11:24 am

    Thanks for the great tutorial. Not only functional but designed well at that.

  31. dannyboy says

    September 29, 2009 at 9:13 pm

    hi all

    i was hoping the version of the bottom of the page lol anyway nice tricks

  32. Jason says

    September 30, 2009 at 10:41 pm

    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!

  33. Divakar Manikyam says

    October 3, 2009 at 2:45 am

    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…

  34. Rashidi Landbrug says

    October 4, 2009 at 8:56 pm

    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

  35. Gregor Spowart says

    October 6, 2009 at 12:10 pm

    Really useful. I’ll need to find a way to try it on a new website!

  36. Naboob says

    October 10, 2009 at 6:42 am

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

    like dynamic drive anylink :)

  37. Glennyboy says

    October 14, 2009 at 9:13 am

    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

  38. Glennyboy says

    October 14, 2009 at 9:22 am

    Ah, worked it out….

    $(document).ready(function(){
    $(window).load(function() {
    $(“.panel”).toggle(“fast”);
    $(this).toggleClass(“active”);
    return false;
    });
    });

  39. Justin Meyers says

    October 19, 2009 at 3:15 pm

    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!

  40. Mike Smith says

    October 19, 2009 at 9:50 pm

    @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.

  41. Justin Meyers says

    October 20, 2009 at 7:55 pm

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

    Thanks!

  42. cOdewalkz says

    October 22, 2009 at 1:06 am

    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!

  43. cOdewalkz says

    October 22, 2009 at 2:18 am

    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;
    });
    });

  44. Gina says

    October 23, 2009 at 11:18 am

    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.

  45. josydaisy says

    November 2, 2009 at 2:45 pm

    oooh i’m loving it. Thanks for sharing this!

  46. Dizajn.vg says

    November 17, 2009 at 12:34 pm

    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

  47. Louis says

    November 17, 2009 at 10:00 pm

    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!

  48. Liron says

    November 23, 2009 at 6:17 pm

    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 …

  49. Perri Mertens says

    November 30, 2009 at 2:47 pm

    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?

  50. Spenser says

    December 24, 2009 at 1:53 pm

    @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!

  51. john says

    January 3, 2010 at 10:27 am

    nice tut

  52. alex says

    January 12, 2010 at 1:22 pm

    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.

  53. alex says

    January 12, 2010 at 1:53 pm

    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.

  54. john says

    January 14, 2010 at 2:00 pm

    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!

  55. john says

    January 14, 2010 at 2:05 pm

    ok, is solved with z-index: 999; , very good script!!!

  56. denbagus says

    January 20, 2010 at 2:24 am

    thank you for this tutorial..

  57. Fatih Güner says

    January 21, 2010 at 4:02 pm

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

  58. Aglan says

    January 31, 2010 at 9:38 pm

    Thanks man, great effort and work.

  59. Srecko Bradic says

    February 2, 2010 at 2:19 am

    Wonderful demo and best at all is that it work smooth in my Opera browser :)

  60. Brett says

    February 2, 2010 at 1:47 pm

    Works okay in IE6 too!

  61. lawoman says

    February 2, 2010 at 2:23 pm

    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.

  62. Pedro says

    February 3, 2010 at 12:19 pm

    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. ;)

  63. Aglan says

    February 3, 2010 at 12:58 pm

    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

  64. rachman says

    February 4, 2010 at 9:58 am

    very very nice….thanks a lot!!!

  65. Java developer says

    February 6, 2010 at 5:14 pm

    Very nice. I think I will use smth like this in my next project. Thnx

  66. ELCODIGODEBARRAS says

    February 7, 2010 at 10:14 am

    …Simply delicious !

  67. Pedro says

    February 8, 2010 at 5:59 pm

    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.”

  68. Jon Phillips says

    February 8, 2010 at 6:24 pm

    @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. :)

  69. Pedro says

    February 8, 2010 at 6:36 pm

    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.

  70. Pedro says

    February 8, 2010 at 6:37 pm

    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.

  71. Satish Borkar says

    February 9, 2010 at 8:25 am

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

    cheers!!

  72. Jose Tapia says

    February 13, 2010 at 12:50 am

    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

  73. Jose Tapia says

    February 13, 2010 at 12:52 am

    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

  74. Lynne says

    February 14, 2010 at 11:52 am

    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!

  75. xela says

    February 21, 2010 at 7:13 pm

    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?

  76. Claudia says

    February 21, 2010 at 10:26 pm

    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!

  77. Amber Sjomeling says

    February 21, 2010 at 11:50 pm

    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.

  78. antonio ramirez says

    February 24, 2010 at 4:17 am

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

    Thank you very much!

  79. antonio ramirez says

    February 24, 2010 at 4:19 am

    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!

  80. Federica Sibella says

    February 25, 2010 at 5:31 am

    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!

  81. Shaun McCran says

    February 26, 2010 at 6:36 am

    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

  82. arne says

    March 2, 2010 at 1:36 pm

    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!!

  83. Jon Phillips says

    March 2, 2010 at 2:26 pm

    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! :)

  84. Federica Sibella says

    March 3, 2010 at 8:50 am

    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!

  85. Indialike says

    March 12, 2010 at 2:01 am

    Very nice and useful tutorials for web designers,
    Thanks for posting.

  86. Szabi says

    March 13, 2010 at 3:10 pm

    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.

  87. Ahmad says

    March 17, 2010 at 7:34 am

    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.

  88. Jon Phillips says

    March 17, 2010 at 7:40 am

    @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 :)

  89. Ahmad says

    March 17, 2010 at 8:34 am

    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

  90. Schrumpfschläuche says

    March 17, 2010 at 11:30 am

    Very great work. thx a lot. I need a slide next time for my header website.

  91. Derrick Workman says

    April 8, 2010 at 12:20 am

    A seriously awesome tut. Used it in the company page. Thanks a bunch for the effort you put into the tut!

  92. Adam Hermsdorfer says

    April 11, 2010 at 9:21 pm

    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!

  93. jason says

    April 14, 2010 at 3:51 pm

    This is great, thanks for the easy to follow tutorial…

  94. Jeff says

    April 21, 2010 at 11:52 am

    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;

  95. Web Design says

    April 22, 2010 at 4:10 pm

    Very Nice tutorial thanks I always need to know need stuff using jquery we all use it and it looks awesome

  96. Abhijeet says

    April 28, 2010 at 5:54 am

    This is really SEXY gizmo for website. Thankx Jon

  97. Soam says

    May 2, 2010 at 2:17 am

    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 ?

  98. Jenny says

    May 15, 2010 at 3:04 pm

    this is awesome and exactly what I was looking for. Thanks for this :D

  99. Jorge Andrés Cañón Sierra says

    May 18, 2010 at 12:48 pm

    Recomiendo:

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

    Se coloque

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

  100. Catherine Azzarello says

    May 19, 2010 at 1:37 pm

    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!

  101. Louisa says

    May 24, 2010 at 12:22 am

    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!!!

  102. Louisa says

    May 24, 2010 at 12:39 am

    @ 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!

  103. anarchoi says

    May 28, 2010 at 12:16 am

    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

  104. Sivaranjan says

    May 28, 2010 at 4:22 am

    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.

  105. Catherine Azzarello says

    June 1, 2010 at 4:38 pm

    @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!

  106. David Lambert says

    June 4, 2010 at 1:01 pm

    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.

  107. Roelf says

    June 14, 2010 at 8:50 am

    @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)

  108. Elijah says

    June 18, 2010 at 2:12 am

    Thanks! really very useful for my development projects,

  109. darth scripter says

    June 27, 2010 at 6:31 pm

    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.

  110. Horse says

    June 30, 2010 at 4:54 am

    @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 :)

  111. Horse says

    June 30, 2010 at 5:05 am

    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

  112. uxepiipexu says

    July 4, 2010 at 4:44 pm

    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 !!!

  113. Beben says

    July 10, 2010 at 6:47 am

    its cool…wow yeah :-bd

  114. AJ says

    July 12, 2010 at 4:12 pm

    This is so awesome. I just need to figure out how to integrate on my site. Kudos!

  115. Ramesh says

    July 20, 2010 at 11:22 am

    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

  116. mark williams says

    July 27, 2010 at 7:17 am

    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

  117. Theresa says

    July 28, 2010 at 4:10 pm

    Exactly what I was looking for. Thank you!

  118. Poppoll says

    July 30, 2010 at 1:15 pm

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

    Poppoll

  119. rezvan says

    August 1, 2010 at 11:35 am

    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?

  120. Alain says

    August 2, 2010 at 10:56 am

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

  121. paul says

    August 5, 2010 at 12:04 am

    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

  122. paul says

    August 6, 2010 at 1:00 pm

    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

  123. wahid polin says

    August 8, 2010 at 12:09 pm

    Thnx for this tutorial.I have just successfully implemented it on my site.

  124. khaled says

    August 10, 2010 at 9:43 pm

    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

  125. Werner says

    August 15, 2010 at 6:38 am

    Great Sliding Panel

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

    in my footer is a Link for you.

    cheers

    Werner

  126. Zach says

    August 17, 2010 at 11:37 am

    Perfecto! This EXACTLY what I’ve been searching for, dude, thanks for the great tut!

  127. delite says

    September 8, 2010 at 7:03 am

    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?

  128. Kishore Mylavarapu says

    September 10, 2010 at 1:56 pm

    Absolutely amazing tutorial.Great great great..thanks alot.

  129. Steve says

    September 16, 2010 at 12:47 am

    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

  130. Web2 says

    September 17, 2010 at 11:40 am

    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 ;-)

  131. besouro says

    September 18, 2010 at 8:16 pm

    great!
    how can I put 3 info links? would it be 3 triggers?
    how can I do it?

  132. James Wade Weaver says

    September 18, 2010 at 9:18 pm

    Awesome! Thanks!

  133. Marco Ingrosso says

    September 20, 2010 at 12:09 pm

    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

  134. Hardy says

    September 27, 2010 at 6:24 pm

    Am I right that this panel is not supported by IE6? Can I make it happen? Thanks for any info on that.

  135. david says

    October 10, 2010 at 8:02 pm

    thanks a lot men ..that’s a great job .thanks again

  136. Alec says

    October 15, 2010 at 9:17 pm

    very cool – thanks for the tutorial!

  137. Balaji says

    October 16, 2010 at 1:58 am

    Great work, looks cool, thanks for sharing the brilliant work.

  138. Pat Parker says

    October 21, 2010 at 11:34 am

    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

  139. divemaster says

    October 22, 2010 at 11:48 pm

    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.

  140. Dyego says

    October 31, 2010 at 10:01 pm

    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.

  141. Jon Phillips says

    November 1, 2010 at 12:28 pm

    @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.

  142. k says

    November 3, 2010 at 4:49 am

    bro anyway to use this to work in ie6?

  143. Mika Kaakinen says

    November 3, 2010 at 9:35 am

    Very nice.

  144. lorax says

    November 8, 2010 at 3:19 am

    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!!!

  145. Mac says

    November 16, 2010 at 8:08 am

    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…

  146. John Gamonon says

    November 16, 2010 at 10:03 pm

    Well done!

  147. barry says

    November 17, 2010 at 12:22 am

    Man that was really mindblowing. Loved it.

  148. Mika Kaakinen says

    November 20, 2010 at 8:23 pm

    I prefer toggle(“slow”) to toggle(“fast”). That is matter of taste.

  149. Indrakeerthi says

    November 21, 2010 at 1:19 pm

    Great and thanks

  150. Mika Kaakinen says

    November 23, 2010 at 8:55 am

    I have used this panel at my site. I like it. Thanks a lot, Jon.

  151. Luke Johnson says

    November 26, 2010 at 6:27 pm

    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!

  152. kro. says

    November 27, 2010 at 6:31 pm

    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.

  153. kro. says

    November 27, 2010 at 6:44 pm

    OK, I think I could make this work if I knew how to trigger on a div’s ID instead of its class. searching….

  154. Zhono says

    December 5, 2010 at 2:00 pm

    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.

  155. Jhines373 says

    December 12, 2010 at 6:33 pm

    anybody try to get this to work in IE? I need help.

    thanks

  156. Emangoo says

    December 31, 2010 at 7:12 pm

    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!

  157. Smashing Wall says

    January 14, 2011 at 4:26 am

    yes, working in [email protected] same as like FF and chrome!

  158. Tim Cox says

    January 20, 2011 at 9:39 am

    sorry if you already answered this, but how could i get more than one of these sliding panels to work on a page?

  159. Erwan Corre says

    January 26, 2011 at 1:34 pm

    Thank you for this very good trick! I try it just right now!

  160. Tanner says

    January 26, 2011 at 1:54 pm

    for the opening on page loading, here:

    $(“.panel”).show();

    for the sliding, try fadeToggle() in the place of toggle()

  161. vincentcassar says

    February 3, 2011 at 10:15 am

    This is very good stuff – well done and thanks :)

  162. Tim Myers says

    February 7, 2011 at 9:59 pm

    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?

  163. Preetypinks_26 says

    February 9, 2011 at 6:13 pm

    plz will some one give any suggestion as how to modify yhe code so as to get it work in IE browsers

  164. Kev says

    February 12, 2011 at 9:16 pm

    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

  165. Lou says

    February 23, 2011 at 9:53 pm

    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.

  166. Lou says

    February 25, 2011 at 4:09 pm

    I got it: z-index:1

  167. Dasce says

    February 27, 2011 at 11:35 pm

    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;
    });
    });
    });
    });

  168. hollister uk says

    May 8, 2011 at 3:09 am

    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.

  169. abercrombie milano says

    May 8, 2011 at 3:11 am

    You made some respectable factors there. I appeared on the web for the problem and found most individuals will associate with with your website.

  170. Marvelous says

    May 16, 2011 at 7:25 pm

    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

  171. Jerico Jien says

    May 17, 2011 at 1:11 pm

    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

  172. Tomer says

    May 21, 2011 at 5:42 pm

    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

  173. John says

    June 15, 2011 at 8:51 am

    Great tutorial and great end product – W3C valid too which is always a bonus =].

    Cheers!

  174. Mimo says

    June 15, 2011 at 11:05 am

    Thanks for this wonderful tutorial

  175. Mike Lawson of trCreative says

    June 16, 2011 at 5:49 am

    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!

  176. Rogerio says

    June 26, 2011 at 4:56 pm

    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.

  177. Mass Profit Formula Review says

    July 8, 2011 at 4:18 pm

    Nice post! Loved reading it this tutorial, could come handy some day!

  178. Hardik Viradiya says

    July 11, 2011 at 5:13 am

    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…

  179. Dejan @ Izdelava spletne strani says

    July 13, 2011 at 2:21 am

    Thank you… i was wonder for some time how to do that! Thank you for sharing with us!

  180. Chugy says

    July 30, 2011 at 5:02 am

    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 &plus; 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.

  181. Thomas O'Rourke says

    August 2, 2011 at 5:22 am

    ^^ 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.

  182. Abdulqadir says

    August 2, 2011 at 11:21 pm

    Thanks for sharing the code… I was looking for the thrid one… :)

  183. Paula says

    December 10, 2017 at 12:00 pm

    This no longer works. The google cdn is no longer there.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022