Dock circulaire/menu en css ou jquery

Question

Est-il possible d'avoir un menu ou un dock circulaire en utilisant css ou jquery?
J'ai un ensemble d'images comme les éléments de quai qui doivent être affichés comme un quai circulaire ... Cependant, le nombre d'éléments dans le dock ne sont pas constants et peuvent varier .... donc je ne peux pas utiliser des valeurs constantes pour positionner chaque article d'une manière prédéfinie. Ajax charge quelques images dans ce div particulier et j'ai besoin d'utiliser css ou jquery pour le styler afin qu'ils soient affichés comme éléments de quai circulaire. Toute idée sur la façon dont cela peut être mis en œuvre ..?
Je voudrais un navigateur de mise en œuvre spécifique, mais j'accueillir aussi si quelqu'un a des solutions spécifiques à quelques navigateurs ...

MISE À JOUR
Je ne pense pas que je veux exactement un menu à tarte. .. il devient facilement foiré que le nombre d'articles de quai augmente. Je cherche un quai en spirale. et en spirale je veux dire que les éléments du menu doivent être dans l'alignement suivant ..

Answer 1

Je l'ai eu je pense! Ceci est juste un concept de base, alors s'il vous plaît modifiez-le vous-même.

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

Voir les éléments suivants JSFiddle et le code ci-dessous:

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); 
} 

Et certains CSS à des fins de test:

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

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

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

Mise à jour: réponse au commentaire

La fonction pour yPos et xPos génère des éléments à l'extérieur, ils commencent à partir du point central. En définissant un a différent et un supplémentaire var b à l'intérieur du Math.cos(b*i). Il est possible de changer le taux de divs apparaissant et la propagation de la spirale totale. La propagation de la spirale est définie par a, car elle définit l'amplitude. Le taux d'apparition des divs est défini par le nouveau b.

Donc, un plus petit b signifie des angles inférieurs, signifie plus rapprochés sur la spirale. Un plus petit a signifie plus faible amplitude, signifie rapprocher dans les axes x et y.

Si le nombre d'images n'est pas prévisible, cela ne devrait pas poser de problème, en raison de la sortie de la spirale. Bien sûr, cela vous donnera des problèmes lors de l'ajout de trop.

Une autre solution est juste de le faire en PHP, car il n'a rien de dynamique à faire, vous pouvez donc le faire déjà dans votre backend. Le pourrait être le même avec le forloop et tout, mais ensuite avec des instructions d'impression dans votre PHP.

Answer 2

Bien que vous spécifiez ne pas vouloir un menu à tarte, peut-être my code peut être utile (ou l'un des liens d'origine). La position des éléments est calculée, donc pas besoin de s'inquiéter de l'ajout/suppression.

Answer 3

est-ce que cela pourrait vous intéresser? http://www.wizzud.com/jqDock/

Answer 4

Je crois que vous pouvez utiliser quelque chose comme http://snipplr.com/view/43352/jquery-plugin-spiral-animations/

essayez de remplacer la fonction Animer dans le plug-in avec un
simple, Css ({ 'margin-left': x, 'margin-top': y })

les opérations mathématiques sont déjà là, vous avez juste besoin de transformer l'animation dans une position statique (donnant un décalage différent pour chaque élément dans le menu)

Désolé, je n'ai pas eu le temps d'écrire du code, c'est plus facile à faire qu'à expliquer: D