Design Lunatic

Animated Top Panel with Jquery

In this tutorial, we will learn to make a sliding top panel that slides out when you click a special link.

The logic behind this: We have a div with a fixed height at the very top of the page, with a margin-top equal to the negative of its height. We also have a link inside that panel with position set to absolute, and a margin-top. The link ends up sticking out of the panel. When the link is clicked, the margin-top of the panel changes from -500 to 0, which ends up in it being fully visible.

Now, the tutorial:

First, we set up a simple html page, with the container for the panel, the link, and some dummy text on the page itself.

<div id="drop_bar">
<div id="drop_bar_content">

Lorem ipsum dolor sit amet.  Consectur amet lorem dolor ipsum.

<div id="drop_bar_link"><a href="#top_bar">Menu</a></div>
</div>
</div>

<p>Lorem ipsum dolor sit amet.  Consectur amet lorem dolor ipsum.</p>

The “drop_bar_content” div is there for purely styling reasons. It doesn’t have to be there.

The “drop_bar_link” is the link that will animate the top bar.

We need some CSS to make this work.

body {
margin: 0;
padding: 0;
}

#drop_bar {
height: 500px;
background: #393939;
margin-top: -500px;
position: relative;
z-index: 2;

font-family: arial;
color: #ffffff;

padding-left: 20px;
}

#drop_bar_link {
height: 30px;
position: absolute;
margin-top:480px;
margin-left: 900px;
z-index: 2;
padding-left: 10px;
padding-right: 10px;
background: #393939;

-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#drop_bar_link a {
color: #ffffff;
text-decoration: none;
font-family: arial;
line-height: 25px;
}

Most of this is just styling to make the link look nice. We also have a super-simple css reset. The important part of all this is the “#drop_bar” styling. We have to give it a height, and the margin-top has to be equal to the negative of its height; otherwise, the panel will always be visible. We also have to give it position: absolute so that it doesn’t interfere with any other elements. The link has to have a margin-top to be visible at all times.

Now, the jquery part of this.

$(document).ready(function(){

var menu = 0;

$('#drop_bar_link').click(function(){

	if(menu == 0){

	menu = 1;

	$('#drop_bar').animate({
		marginTop: '0',
		marginBottom: '-500',
	});

	}

	else{

	menu = 0;

	$('#drop_bar').animate({
		marginTop: '-500',
		marginBottom: '0',
	});

	}

	return false;

});

});

Step by step:
1. When the document is ready, set a variable called menu to 0. We will need this for the link to toggle the top menu.
2. Add a click event handler to “drop_bar_link”.
3. Now, we have a simple if..else function. If the variable menu is 0, animate the top bar to be visible; If the variable menu is 1, slide it back up. This is basically a simple toggle system that is extremely reusable.

So there you have it. A simple jquery panel toggle system. Extremely simple, extremely reusable.