MooShell

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

window.addEvent('domready', function(){
    var log = $('log');
    
    var menu = new BouncyMenu('container',{
        duration: 250,
        onMouseenter: function(element){
            log.set('html', element.get('html'));
        }
    });
    
    $('detach').addEvent('click', function(){
       menu.detach();
    });
    $('attach').addEvent('click', function(){
        menu.attach();
    });
        
});

var BouncyMenu = new Class({

    Implements: [Options, Events],
    
        options: {
            /* 
            onMouseenter: $empty,
            onMouseleave: $empty,
            */
            duration: 500,
            distance: 30            
        },

    initialize: function(element, options){
        this.setOptions(options);
        this.elements = document.id(element).getChildren();
        this.setupElements();
        this.attach();
    },

    setupElements: function(){
        this.elements.each(function(element){
            element
             .store('originalPadding', element.getStyle('padding-top'))
             .set('tween',{
                    duration: this.options.duration
                });
        }, this);
    },

    attach: function(){
        this.elements.each(function(element){
            var events = {
                mouseenter: function(){
                    element
                     .set('tween',{ transition: 'bounce:out' })
                     .tween('padding-top', this.options.distance);
                    this.fireEvent('mouseenter', element);
                }.bind(this),
                mouseleave: function(){
                    element
                     .set('tween',{ transition: 'circ:out' })
                     .tween('padding-top', element.retrieve('originalPadding'));
                    this.fireEvent('mouseleave', element);
                }.bind(this)
            };
            element.store('menuEvents', events);
            element.addEvents(events);
        }, this);
        return this;
    },
    
    detach: function(){
        this.elements.each(function(element){
            element.removeEvents(element.retrieve('menuEvents'));
        });
        return this;
    }

});

<button id="detach">detach</button> <button id="attach">attach</button> <span id="log">Waiting ...</span>
<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;
    padding-top: 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;
}