Toggle Bubble Fades

by nickadeemus2002

HTML

<body>
    <ul id="menu">
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
    <ul id="sub">
        <li>Bubble 1</li>
        <li>Bubble 2</li>
        <li>Bubble 3</li>
        <li>Bubble 4</li>
    </ul>
</body>

CSS

#menu li{
    width:90px;
    height:20px;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    color:#CCF;
    float:left;
    margin:0 1px;
    background:#66F;
    cursor:pointer;
}
#sub{
    clear:left;
}
#sub li{
    width:90px;
    height:90px;
    line-height:90px;
    color:#66F;
    text-align:center;
    border:1px solid #99F;
    border-radius:90px;
    background-image: -moz-radial-gradient(center 90deg, ellipse closest-side, white 0%, #CCF 100%);
    background-image: -webkit-radial-gradient(center 90deg, ellipse closest-side, white 0%, #CCF 100%);
    background-image: -ms-radial-gradient(center 90deg, ellipse closest-side, white 0%, #CCF 100%);
    background-image: -o-radial-gradient(center 90deg, ellipse closest-side, white 0%, #CCF 100%);
    float:left;
    display:none;
}

JavaScript

$(function() {
    $("#menu li").click(function() {
        var index = $("#menu li").index(this);
        $("#sub li:eq("+ index +")").fadeToggle(500, 'linear');
        $("#sub li").not("#sub li:eq("+ index +")").fadeOut(500);
    });
});