Circular dock/menu in css or jquery

Is it possible to have a circular menu or dock using css or jquery.?

I have a set of images as the dock items that need to be displayed as a circular dock... however the number of items in the dock are not constant and may vary开发者_运维知识库.... so i cannot tend to use constant values for positioning each item in a pre-defined manner. Ajax loads some images into this particular div and i need to use css or jquery to style this so that they get displayed as circular dock items. Any idea on how this can be implemented..?

I would like a browser in-specific implementation, but i also welcome if some one has some solutions specific to few browsers...

UPDATE

I don't think i exactly want a pie menu... it easily gets messed up as the number of dock items increase. I am looking for a spiral dock. and by spiral i mean that the menu items must be in the following alignment..

---

I got it I think! This is just a basic concept, so please tweak it yourself.

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

See the following JSFiddle and the code below:

var items = 10;
var a = 20;
var b = 1; // updated an extra b, used for rate (see update section below)
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

And some CSS for testing purposes:

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

Update: answer to the comment

The function for yPos and xPos are generating items to the outside, they start from the center point. By defining a different a and a an extra var b inside the Math.cos(b*i). It is possible to change the rate of the divs showing up and the spread of the total spiral. The spread of the spiral is defined by a, because it defines the amplitude. The rate that divs are showing up is defined by the new b.

So a smaller b means lower angles, means closer together on the spiral. A smaller a means lower amplitude, means closer together in x and y axes.

If the number of images is not predictable, it shouldn't matter, because of the spiral going out. Of course, this will give you problems when adding too much.

Another solution is just doing this in PHP, because it has nothing dynamic to do, so you can already do this in your backend. The could will be the same with the forloop and all, but then with printing statements in your PHP.

---

Although you specify not to want a pie menu, perhaps my code can be of use (or one of the original links). The position of the items is calculated, so no need to worry about adding/removing.

---

could this be of interest? http://www.wizzud.com/jqDock/

---

I believe you could use something like http://snipplr.com/view/43352/jquery-plugin-spiral-animations/

try replacing the animate function in the plugin with a simple
.css({'margin-left':x,'margin-top':y})

the math operations are already there, you just need to transform the animate in a static position ( giving a different offset for every item in the menu)

Sorry, i didn't had time to write some code, its easier to do than to explain :D