Dock Content Tutorial with jQuery and jQuery Easing Plugin

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.

Explanation

Please refer to the following div structure:

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!

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial