window.addEvent('domready', function(){
    //First Example
    var elm = $('menu_head'),
        color = elm.getStyle('backgroundColor');
    
    // We are setting the opacity of the element to 0.5 and adding two events
    $('menu_head').set('opacity', 1.0).addEvents({
        mouseenter: function(){
            // This morphes the opacity and backgroundColor
            this.morph({
                'opacity': 0.8,
                'background-color': '#fcfdfc'
            });
        },
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                opacity: 1.0,
                backgroundColor: color
            });
        }
    });

    // Second Example
    
    // The same as before: adding events
    $('menu_head').addEvents({
        'mouseenter': function(){
            // Always sets the duration of the tween to 1000 ms and a bouncing transition
            // And then tweens the height of the element
            this.set('tween', {
                duration: 2000,
                transition: Fx.Transitions.Quint.easeOut // This could have been also 'bounce:out'
            }).tween('height', '150px');
        },
        'mouseleave': function(){
            // Resets the tween and changes the element back to its original size
            this.set('tween', {}).tween('height', '29px');
        }
    });
});