Dock Content Tutorial with jQuery and jQuery Easing Plugin

Dock Content Tutorial with jQuery and jQuery Easing Plugin


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.

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 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 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 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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

22 comments

bitlimakina
Wed, 20th May 2009
thx for great sharing Reply
Rsstudio
Wed, 20th May 2009
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
Wed, 20th May 2009
@Rsstudio: thanks : )... Reply
Michel
Wed, 20th May 2009
Marvellous ! Reply
stephen
Sat, 23rd May 2009
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
Sun, 24th May 2009
Hi Stephen, you're most welcomed :) Reply
wayne
Tue, 26th May 2009
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
Tue, 26th May 2009
@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
Fri, 29th May 2009
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
Tue, 9th June 2009
@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
Tue, 9th June 2009
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
Sat, 13th June 2009
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
Mon, 22nd June 2009
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
Mr.Harn
Sun, 12th July 2009
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 Reply
Robson Rabelo
Fri, 9th October 2009
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 Reply
fizi
Sun, 17th January 2010
Great!
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! Reply
waleed
Wed, 12th January 2011
thanks very much i am looking for something like this ask you to transfer this to my website

http://www.herealmukalla.com/vb Reply
Eric Rotramel
Thu, 20th January 2011
Extremely well done on the tutorial. I wish they were all this clear, thorough, and organized. Really nice plugin. Reply
Jon
Mon, 7th February 2011
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??? Reply
Kevin Liew Admin
Tue, 8th February 2011
It's the CSS, it inherits the parent's attributes. I guess you just have to style each of the elements. Reply
komay
Sat, 26th February 2011
Hi Kevin,

Is it possible to use this technique to create webpage like this: http://para.llel.us/themes/unite/index-3.html?
(when you click Feature nav menu >> Login >> Style 2 (slide), the dock sliding down the whole page bellow).

Thanx for sharing

Reply
Kevin Liew Admin
Sat, 26th February 2011
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. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement