Mootools Events

by Dimitar Christoff

HTML

<ul id="option">
    <li class="selected" id="a">a</li>
    <ul id="list">
        <li id="b">b</li>
        <li id="c">c</li>
        <li id="d">d</li>
    </ul>
</ul>

CSS

ul li,li.selected div{
    width:22px;
    height:22px;
    display:block;
    background:#000;
    color:#fff;
    text-align:center;
    border-radius:3px;
}
ul#list{
    display:none;
    opacity:0;
    float:left;
}

JavaScript

var x = '<div>v</div>';
$$('ul#option li.selected').set('html',x);
var opt = $$('ul#option li.selected div');
var d = opt.getStyle('display');
var l = document.id('list');
var list = opt.set('morph').addEvents({
    click:function(){
        l.store('timerA',(function(){
            l.morph({
                'display':'block',
                'opacity':1
            });
            $$('ul#option li.selected').setStyle('background-color','#fff');
            $$('ul#option li.selected div').hide();
        }).delay(10,this));//$clear(this.retrieve('timerA'));
    }
}
                                     );
l.set('morph').addEvents({
    mouseleave:function(el){
        this.store('timerB',(function(){
            this.morph({
                'display':d,
                'opacity':0
            });
            $$('ul#option li.selected').removeProperties('style');
            $$('ul#option li.selected div').show();
        }).delay(500,this));//$clear(this.retrieve('timerB'));
    }
});