Growing Menu

by Kishore Sahasranaman

HTML

<ul class="nav">
    <li>Look
<!--         <ul class="nav-child">
            <li>Look 1</li>
            <li>Look 2</li>
        </ul> -->
    </li>
    <li>Play</li>
    <li>Eat</li>
    <li>See</li>
</ul>

CSS

.nav {
    position: absolute;
    width: 200px;
    height: 200px;
}
.nav li {
    position: relative;
    top: 0;
    left: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    font-family: arial;
    display: inline-block;
    background: #FF2C66;
    border-radius: 50%;
    color: white;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 6;
    text-transform: uppercase;
    font-size: 13px;
}
.nav-child li {
    background: blue;
    display: none;
}

JavaScript

function Menu($item) {
    this.item = $item;
};

Menu.prototype.makeNewPosition = function ($container) {
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
};
    

Menu.prototype.move = function () {
    var that = this;
	$.each(this.item, function(index, value) {
        var newq = that.makeNewPosition($(value).parent());
        
        $(value).animate({
        top: newq[0],
        left: newq[1]
    }, 2000, function() {
        that.move();
    });
    });
};

var $menu = new Menu($('.nav li'));
$menu.move();