Animate menu

by oterox

HTML

<table width="160" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="40" height="40" valign="top" bgcolor="#e4e4e4">
            <span class="box1">Hello ji</span>
            <span class="box2">Sanket</span>    </td>
        <td width="40" height="40" valign="top" bgcolor="#CCCCCC">&nbsp;</td>
        <td width="40" height="40" valign="top" bgcolor="#999999">&nbsp;</td>
        <td width="40" height="40" valign="top" bgcolor="#666666">&nbsp;</td>
    </tr>
</table>

CSS

.box1{
    width:40px;
    height:13px;
    float:left;
    font-size:.6em; color:#fff; background:#99CC00;
    font-family:Arial, Helvetica, sans-serif;
}
.box2{
    width:40px;
    height:auto;
    float:left;
    font-size:.6em; color:#fff; background:#FF6600;
    font-family:Arial, Helvetica, sans-serif;
    margin-top:1px;
    opacity:.8;
    filter: alpha(opacity=75);
}

JavaScript

$(function() {
    $('span').hover(function() {

        $(this).stop().css({
            'z-index': '999999',
           
            'float': 'left'
        }).animate({
            marginTop: '0px',
            marginLeft: '0px',
            top: '0',
            left: '0',
            width: '200px',
            height: '125px',
            padding: '0px'
        }, 700, 'swing');


    }, function() {

        $(this).stop().css({
            'z-index': '0',
            'border': '0px'
        }).fadeIn('slow').animate({
            marginTop: '0px',
            marginLeft: '0px',
            top: '0',
            left: '0',
            width: '40px',
            height: '13px',
            padding: '0px'
        }, 700, 'swing');


    });
});