This tutorial explais how to design an high impact elastic effect to make original web menu using some lines of Javascript code and MooTools framework. The effect is simple to develope and reuse in your web projects changing only HTML code and CSS. Take a look!

The effect I want to realize is the following. I have a "layer cloud" with some layer overlapped to the others. On "mouse over" the select layer goes down with a nice animation effect and when you release the element this goes up with an elastic effect:

Take a look at this live preview to see this script in action.

Download source code

Live Preview

1. HTML code

Create a layer which contains all elements in the "cloud" (in this case I used DIV elements):

<div id="contact">This is the layer about me.</div>
<div id="about">Contact me? <a href="mailto:myemail@email.com">My Email</a></div>
<div id="profile">This is my <a href="http://www.9lessons.org">website</a></div>

</div>

2. CSS Code

Use CSS to stylize previous elements how you prefer. In this tutorial I used this CSS code:

#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 31px;
top: 66px;
border:solid 4px #CCC;
}

#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 80px;
top: 37px;
border:solid 4px #CCC;
}
...

The result is something like this, a "layer cloud" with some layer overlapped to others:

You can add other overlapped layers simply adding new <div> elements in step (1) with the related CSS stlye in step 2. To overlap layer I use CSS properties "position:absolute" and "z-index" for each element.

3. JavaScript code

In order to obtain our elastic effect I used MooTools framework and some lines of Js code.
No fear... it's very simple! In the <head> tag of the page add a link to MooTools:

Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):

window.addEvent('domready', function(){
var zindex = 2;
$('#container div').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});

item.addEvents({
'mouseenter' : function(e){
fx.stop()
fx.start(0,100);
zindex = zindex + 1;
$(o).setStyle('z-index', zindex)
},
'mouseleave' : function(e){
fx.stop()
fx.start(0);
zindex = zindex - 1;
$(o).setStyle('z-index', zindex)
}

});
})
});

</script>

In this code I used a MooTools basic knowledge. In the past week I already dedicated several lessons about that. I suggest you to take a look at these post: