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:
Download source code 
Live Preview1. HTML code
Create a layer which contains all elements in the "cloud" (in this case I used DIV elements):<div id="container">
<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://woork.blogspot.com">website</a></div>
</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://woork.blogspot.com">website</a></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;
}
...
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:
<script type="text/javascript" src="mootools.svn.js"> </script>
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):
<script type="text/javascript">
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
});
})
});
</script>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)
}
}); '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)
}
})
});
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:
- Lesson 1 - Basic Tips for Web Designer
- Lesson 2 - Get elements ID using unobtrusive code
- Lesson 3 - Interaction with Forms
Download source code Live PreviewIt's all! Do you have some suggest? Add a comment!
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Hey man... another great post. You are the best! Haooy new year!!!!
Nice and clean code, but I'm not really sure what the use of this particular effect is :) I guess it's a proof of concept since putting this online would only aggrevate your visitors (trying to click a link, etc).
Hi,
I find it nice but I don't see the point here! What is clearly the purpose?
Thanks to clarify please
Regards,
Hey Antonio, not exactly sure what this cloud effect is supposed to do. It doesn't seem to be working very well, and might be a bit frustrating for the user.
Guys... yes this is a proposal. I suggest to use it with horizontal elastic effect (change margin-top -> margin-left) and with a link (with css display property set block) instead of div.
Thank you.
Very nice and good job.
Nice Tut Antonio.Happy New Year Still Waiting For Template.
Great codes. But i cant catch any link!
Thanks BOSS...
& Happy New Year....
very good tutorial antonio.
http://naeemnur.bloggspot.com
Hi,
In my opinion this menu is awful - in my FF elements are jumping all of the time and I can't catch any link at all, in Chrome it works more good, but I can't catch links too. In IE 7 it is similar to Chrome but has few another bugs. And I can't see what is on the menu items that are hovered by other items. It is very unusable. I didn't recommend to use it on live sites :(.
Thank you
thanls for the info antonio! u the best!
Good tutorial, but this is totally pointless to add on your site. Clicking the links in the "live preview" was impossible.
u r blog Is very nice
Thank you for your great idea and work. Ralph
wtf? please show an example where this would have a point
this is nice, but it has a problem on mac - firefox. Will take a look later one at home to see how it can be fixed, but i looked at it in Safari and the effect is sweet.
This would be great for a portfolio website to show off images and create a fun effect.
very nice code, and post:) great.