To tell you the truth, I wish I could remember where I originally found this example because I would like to give credit where credit is due, but I really dont remember. Anyhow, this person’s example was a cool slider effect that stuck to the top of the page. Well I decided to take that and turn into into the same basic concept; only this time coded in JQuery. Oh Yes. I love JQuery.
The examle is pretty straight forward. So if you have any comments or concerns, definitley drop me a comment and I will try my best to answer them.
Here are the screen shots:
Slider in the "Off" Position
Slider in the "On" Position
I kept the same colors and such from the other example so if anyone knows where the original was from, please let me know.
Click Here to see this example in action.
Want to download the code? Of course you do, click here.
Originally seen @ (Antonio Lupetti’s moo-tools example)
Tags: DOM, Javascript, jQuery, jQuery examples, jQuery Slider, jQuery Toggle, jQuery tutorial, toggle
Comment By: Jeremy Latham
February 2nd, 2009 at 7:46 pm
Te example “bounces” when it opens in FF 3.0.5 w/ Vista64. Is that intentional?
Comment By: Vin Thomas
February 2nd, 2009 at 8:23 pm
I think you saw it originally on woork.
Comment By: Adeline
February 2nd, 2009 at 10:43 pm
Hi Rich,
I’ve seen this done at: Web Designer Wall (jQuery tutorials for designers).
It doesn’t use any additional jquery plugin (that’s if you don’t want the bounce animation at the end of your slide).
Adeline
Comment By: d13t
February 3rd, 2009 at 3:44 am
In Safari and FF on my Mac, the panel slides down and the jerks back a few pixels to it’s end position. Not so smooth.
Comment By: shin
February 3rd, 2009 at 7:59 am
Download link is broken.
Comment By: Paul Davis
February 3rd, 2009 at 8:45 am
Looks good! But the download link doesn’t work.
Comment By: inerd
February 3rd, 2009 at 9:40 am
download link not working
Comment By: Neil
February 3rd, 2009 at 12:03 pm
Hi Rich
I think it might have been on Woork
http://woork.blogspot.com/2008/03/sliding-top-panel-using-mootools_05.html
Thanks for porting it to jquery. There are a few cool effects in mootools without exact jquery versions so you increase people’s choice every time you do something like this.
Comment By: badger
February 3rd, 2009 at 3:20 pm
I just happen to be looking for something along these lines. But when the page loads, I would like it to be in the closed state. Then click and it opens. I am some what new to JQuery, have any suggestions?
Comment By: Rich
February 3rd, 2009 at 3:23 pm
Sorry about that. Download link should work now.
Comment By: Bennor McCarthy
February 3rd, 2009 at 4:55 pm
The bouncing is a common issue with the jquery sliding functions. I believe it has something to do with a dodgy height calculation when there are margins and padding in the CSS, and you can work around it by setting a fixed height for the element you are sliding.
Comment By: Rich
February 3rd, 2009 at 5:46 pm
@Neil, Thanks! that was exactly where I had seen it. I feel better now knowing that he can get his proper credit (Antonio Lupetti’s moo-tools example)
@Bennor, I think you are right. most developers; I believe, get around it by using jquery easing plugin, but moo-tools seems to have a better grasp at this. (but i will stay with jQuery).
@badger, sure! add display:none; to the #top-panel{} css and change the Show in the sub-panel div to Hide. Hope that helps.
@Adeline, he used moo-tools and he calls the moo-tools JS in his example. same way I call the jQuery.js. I dont use any other plugins in this example, but the call to jQuery.
Comment By: Shahriar Hyder
October 12th, 2009 at 1:12 am
Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/
Comment By: BeBeN
November 22nd, 2009 at 11:42 am
great great…so dynamic
Comment By: Peter
December 1st, 2009 at 4:13 pm
is there an option of having the default hidden? where you click on show and the rest drops down?
Comment By: Chad
March 20th, 2010 at 7:21 pm
how do you do it in reverse?
as shown on this site?
http://www.imglobal.com/index.aspx
Comment By: Rich
March 23rd, 2010 at 8:13 am
Hey Chad, You can actually take a look at another post I wrote. That might help you since its “kind of” what you are looking for.
Rotated Background with Slide Up menu using jQuery and CSS
What you are looking for is really the slide up menu part of it.
Hope that helps.
Comment By: Amanda
May 20th, 2010 at 7:12 pm
Really nice… that’s why i love jQuery.