Dock Content Tutorial with jQuery and jQuery Easing Plugin

Written by Kevin Liew on 19 May 2009
100,446 Views • Tutorials

Introduction

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.

Explanation

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.

1. HTML

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>
		<div class="block">
			<img data-src="footerTwitter.gif"/><br/>
			<ul>
				<li>I have a new inspiration using easing method, stay tuned!</li>
				<li>Dock menu with jQuery! pretty cool huh...</li>
			</ul>
		</div>
		<div class="block">
			<img data-src="footerPartner.gif"/><br/>
			<ul>
				<li>Smashing Magazine</li>
				<li>Vandelay Design</li>
				<li>Sixrevision</li>
				<li>CSS Mania</li>
				<li>Web Designer Depot</li>
				<li>Queness</li>
			</ul>		
		</div>
		<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 -->
</div>

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 {
margin:0; 
padding:0
}

#slidedown_top {
height: 70px;
background-color:#666;
}

#slidedown_bottom {
position: absolute;
width: 100%;
height:100%;
background-color:#666;
}

#slidedown_content {
position: absolute;
width: 100%;
height: 250px;
top: -205px;
text-align:center;
background:url(bg.gif) repeat-x 0 bottom;
z-index:999;
} 

#slidedown_content .content {
margin:0 auto; 
width:830px;
height:205px;
}

/* Styles for content */

#slidedown_content .content .block {
float:left; 
width:250px;
padding:0 4px 0 4px; 
margin: 0 4px 0 4px;

text-align:left;
font-family:georgia; 
font-size:11px; 
color:#ccc; 
}

#slidedown_content .footer {
height:40px;
}

#slidedown_content .content li {
padding:0; 
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});
	});

});

Conclusion

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.

22 comments
bitlimakina 11 years ago
thx for great sharing
Reply
Rsstudio 11 years ago
Great tutorial!

I actually consider using this tutorial for a multi-layered website: where all contents are docked and loaded by this transition.
Reply
kevin Admin 11 years ago
@Rsstudio: thanks : )...
Reply
Michel 11 years ago
Marvellous !
Reply
stephen 11 years ago
Thank you for sharing!
I am in makeing my blog on my native language(croatian)
I would like to feature this and to translate this tutorial if you dont mint.
of course I will link you as an author : )
keep up the great work
Reply
kevin Admin 11 years ago
Hi Stephen, you're most welcomed :)
Reply
wayne 11 years ago
Great tutorial and great transition!

Have you, or are you planning on doing a bottom-docked version? I'm currently trying to adapt it, but can't get my head round it at the moment. Do you have any tips for a beginner ;)
Reply
kevin Admin 11 years ago
@wayne: hi wayne, i actually wanted to make it dock at bottom. I haven't figure it out yet, however, am still working on it... if you have found out the way, let me know ! : )
Reply
sam 11 years ago
amazing, I love it! thank you very much! I also dream of the bottom docking version, I'll root around. Bottom makes sense to separate from top navigation, which is often the case. Thanks again!
Reply
kevin Admin 11 years ago
@wayne: I'll be creating a tutorial bout docking at the bottom next week. Docking at the bottom is different from the top, a bit tricky :)
Reply
wayne 11 years ago
Ive been experimenting with the file to get it docking at the bottom, but no luck so far... anyone else had any joy?
Reply
Marty McGee 11 years ago
As always, this jQuery tutorial is great, Kevin, thank you. A new tutorial about docking at the bottom will be most welcomed by the community (and me).
Reply
AJ 11 years ago
Pure Genius. I wonder if it's possible to calculate the height of the form dynamically, cause then can use it for my ever gowing list of categories on my wordpress theme.
Reply