Dock Content Tutorial with jQuery and jQuery Easing Plugin

Written by Kevin Liew on 19 May 2009
110,008 Views • Tutorials


In this tutorial, we will be creating a dock menu using the most famous javascript framework - jQuery. First of all I must give credit to 2210media Dock menu tutorial, I got heaps of inspirations out of his tutorial and I decided to modify it and convert it to jQuery based.

This is not an ordinary dock menu, we will be adding the jQuery easing effect as well to further enhance the animation.

First of all, get the jQuery Easing plugin. jQuery easing adds more animation transition effect to jQuery such as Bouncing effect.


Please refer to the following div structure:

Structure for jQuery Dock

Refer to the picture above, on your left hand side is the default appearance. It's divided into 3 parts - #slidedown_top, #slidedown_bottom and #slidedown_content.

  • #slidedown_top: it is binded with mouseover event. On mouse over, the #slidedown_content top position will be set to 0. (It displays the #slidedown_content)
  • #slidedown_bottom: it is binded with mouseover event. On mouse over, the #slidedown_content top position will be set to negative value. (It hides the content of the dock) Basically this will be the body of your website content, if you integrate it to existing website, we have to wrap the website content with #slidedown_content DIV.
  • #slidedown_content: this is where we put the dock menu content. Inside this DIV, we have two classes called Content and Footer. (refer to the picture, right hand side).

Lastly, we have to sort out the top values to hide and show the content. To show the content, the top value will be set to 0, which will display everything in the #slidedown_content. To hide it, we will need to get the height of Content Class, and convert it to negative value.


The HTML code is pretty straight forward, I believe you can understand it easily. In side the DIV.footer, you can put in your website name, logo or even a searchbox.

<div id="slidedown_top"></div> <!-- slidedown_top -->
<div id="slidedown_content">

	<div class="content">
		<div class="block">
			<img data-src="footerAuthor.gif"/><br/>
			<p>A passionate web designer, developer who keens to contribute to web development industry.</p> 
			<p>Feel free to say hi to me, or follow me on twitter. </p>
		<div class="block">
			<img data-src="footerTwitter.gif"/><br/>
				<li>I have a new inspiration using easing method, stay tuned!</li>
				<li>Dock menu with jQuery! pretty cool huh...</li>
		<div class="block">
			<img data-src="footerPartner.gif"/><br/>
				<li>Smashing Magazine</li>
				<li>Vandelay Design</li>
				<li>CSS Mania</li>
				<li>Web Designer Depot</li>
		<div class="clear"></div>
	</div> <!-- content -->
	<div class="footer">
	</div> <!-- footer -->
</div> <!-- slidedown_content -->

<div id="slidedown_bottom">
<!-- Website Content Starts Here -->

Put your website content here!

<!-- Website Content Ends Here -->

2. CSS

CSS plays the main role to create the appearance. You need to get the negative value right. I suggest you to download a copy and play with it by adjusting the negative value. ALso, you can change the height and background image to your own design.

body {

#slidedown_top {
height: 70px;

#slidedown_bottom {
position: absolute;
width: 100%;

#slidedown_content {
position: absolute;
width: 100%;
height: 250px;
top: -205px;
background:url(bg.gif) repeat-x 0 bottom;

#slidedown_content .content {
margin:0 auto; 

/* Styles for content */

#slidedown_content .content .block {
padding:0 4px 0 4px; 
margin: 0 4px 0 4px;


#slidedown_content .footer {

#slidedown_content .content li {
margin:4px 0

.clear {clear:both}

3. Javascript

This time, the jQuery script is very simple. Basically, we bind mouseover event to #slidedown_top and #slidedown_bottom and do the show and hide by using animate function plus jQuery easing transition effect.

You can get the whole list of transition effects from the jQuery easing plugin website. Try it out and choose your favourite.

To change your own transition, change the value of easing variable. (line 4)

$(document).ready(function() {

	var top = '-' + $('#slidedown_content .content').css('height');
	var easing = 'easeOutBounce';
	$('#slidedown_top').mouseover(function() {
		$('#slidedown_content').animate({'top' : 0}, {queue:false, duration:1000, easing: easing});
	$('#slidedown_bottom').mouseover(function() {
		$('#slidedown_content').animate({'top' : top}, {queue:false, duration:500, easing: easing});



That's it. You can modify this dock into different things, for example, a dock menu, search form, contact me form, login form and more. Make sure you check out the demo and download the source code to play with it. Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post into your bookmark. Or you can subscribe to my RSS for more posts. Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Mr.Harn 15 years ago
Thank you very much!!
I'm Everyday thinking about what kind of plugin is better for buisiness web site.
But this plug in can easy to use for buisiness website. I'll try to use it. Thanks
Robson Rabelo 15 years ago
Hello people, I began studying jquery and I was impressed he wanted to leave my congratulations to the creator.

the olympics live in Rio de Janeiro-Brazil
fizi 14 years ago
Only 1 problem: I want to put on the top panel. Below the layer has background image. If the slidedown_top higher that the footer and has gey bar between
top panel and slidedown_bottom (site content). If I make equal height the script do't work. Help me please. Sorry for my english. Thanks!
waleed 13 years ago
thanks very much i am looking for something like this ask you to transfer this to my website
Eric Rotramel 13 years ago
Extremely well done on the tutorial. I wish they were all this clear, thorough, and organized. Really nice plugin.
Jon 13 years ago
I have used this in a wp theme whcih already contain a jquery use. some of the design of the theme got effected either by getting down, or getting default color. what could be the problem???
Kevin Liew Admin 13 years ago
It's the CSS, it inherits the parent's attributes. I guess you just have to style each of the elements.
komay 13 years ago
Hi Kevin,

Is it possible to use this technique to create webpage like this:
(when you click Feature nav menu >> Login >> Style 2 (slide), the dock sliding down the whole page bellow).

Thanx for sharing

Kevin Liew Admin 13 years ago
Hi Komay, it's actually possible, it will require pretty intensive modification which better off start it from ground zero. it's basically a div on the top and hide & show it using slideUp and slideDown effect.