window.addEvent('domready', function(){
var menu = new BouncyMenu('container');
});
var BouncyMenu = new Class({
initialize: function(element){
this.elements = document.id(element).getChildren();
this.attach();
},
attach: function(){
this.elements.each(function(element, index){
element.set('tween',{ link: 'cancel' });
element.addEvents({
mouseenter: function(){
element
.set('tween',{ transition: 'bounce:out' })
.tween('padding-top', 30);
},
mouseleave: function(){
element
.set('tween',{ transition: 'circ:out' })
.tween('padding-top', 10);
}
});
}, this);
return this;
}
});
<ul id="container">
<li>The Dark Knight</li>
<li>The Joker</li>
<li>Two Face</li>
<li>Alfred</li>
</ul>
li {
float: left;
padding: 10px;
background: #f0f0f0;
margin: 4px;
cursor: pointer;
color: #333;
border-bottom: solid 1px #aaa;
}
ul#container {
min-width: 400px;
}
body {
font-family: helvetica, arial;
font-size: 12px;
}