mootools 1.2.2 菜单效果

!-- -->

1. First
2. Second
3. Third
4. Fourth
5. Fifth

!-- <script src="http://mootools.net/download/get/mootools-1.2.2-core-yc.js"></script> -->
<!--<script src="a.js"></script>-->

<OL id=moveMeList>
    <LI style="BACKGROUND-COLOR: rgb(255,153,0); HEIGHT: 20px; COLOR: rgb(255,255,255); MARGIN-LEFT: 0px">
        First
    </LI>
    <LI style="BACKGROUND-COLOR: rgb(255,153,0); HEIGHT: 20px; COLOR: rgb(255,255,255); MARGIN-LEFT: 0px">
        Second
    </LI>
    <LI style="BACKGROUND-COLOR: rgb(255,153,0); HEIGHT: 20px; COLOR: rgb(255,255,255); MARGIN-LEFT: 0px">
        Third
    </LI>
    <LI style="BACKGROUND-COLOR: rgb(255,153,0); HEIGHT: 20px; COLOR: rgb(255,255,255); MARGIN-LEFT: 0px">
        Fourth
    </LI>
    <LI style="BACKGROUND-COLOR: rgb(255,153,0); HEIGHT: 20px; COLOR: rgb(255,255,255); MARGIN-LEFT: 0px">
        Fifth
    </LI>
</OL>

<style>
    #moveMeList li {
    display: block;
    margin: 0;
    padding: 4px;
    width: 120px;
    background: #f90;
    color: #fff;
    cursor: pointer;
    list-style-type:none;
}

</style>
<script defer=defer>

var ListEles = $$('#moveMeList li');
    ListEles.each(function(item, index) {
        item.get('morph', { duration: 500, transition: 'bounce:out' })
        item.addEvent('mouseenter', function(e) {
            $(e.target).morph({
                marginLeft: 20,
                color: '#333',
                backgroundColor: '#ff3',
                height: 35
            });
        });
        item.addEvent('mouseleave', function(e) {
            $(e.target).morph({
                marginLeft: 0,
                color: '#fff',
                backgroundColor: '#f90',
                height: 20
            });
        });
    });

</script>