Ronald Busky Ron's ability to express our client's message in a way that drives results is remarkable. We are firm believers in ROI, and it starts with the first paragraph! Ron's robust style and diverse portfolio has allowed him to write for clients ranging from car dealers to luxury hotels.
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:
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)
Te example “bounces” when it opens in FF 3.0.5 w/ Vista64. Is that intentional?
I think you saw it originally on woork.
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
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.
Download link is broken.
Looks good! But the download link doesn’t work.
download link not working
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.
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?
Sorry about that. Download link should work now.
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.
@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.
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/
great great…so dynamic
is there an option of having the default hidden? where you click on show and the rest drops down?
how do you do it in reverse?
as shown on this site?
http://www.imglobal.com/index.aspx
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.
Really nice… that’s why i love jQuery.
What about Cookie to keep it closed if already closed one time?
How do you get the slider to slide down over the page content? I am using in in a sample template and it always pushes the content down.
To set defaul state to closed add:
display:none;
to css ID:
#top-panel
and invert the script text/imgs states
Incredible page! I most certainly will possibly be viewing back again with regard to additional news.
To have the initial state hidden, I use $(“#top-panel”).hide();
Any solution to the bounce?
Fixed: If you wanna mantain auto height, you have to define a width (like 242px or 100%)
links not working