Kreisdock / Menü in CSS oder JQuery
Ist es möglich, ein kreisförmiges Menü oder Dock mit CSS oder JQuery zu haben?
Ich habe eine Reihe von Bildern als die Dock-Elemente, die als ein kreisförmiges Dock angezeigt werden müssen ... jedoch ist die Anzahl der Elemente in dem Dock nicht konstant und kann variieren .... so kann ich nicht dazu neigen, konstante Werte für die Positionierung zu verwenden jedes Element in einer vordefinierten Art und Weise. Ajax lädt einige Bilder in dieses spezielle div und ich muss CSS oder JQuery verwenden, um dies zu formatieren, so dass sie als kreisförmige Dock-Elemente angezeigt werden. Irgendeine Idee, wie dies umgesetzt werden kann ..?
Ich möchte eine Browser-spezifische Implementierung, aber ich freue mich auch, wenn jemand einige Lösungen speziell für einige Browser hat ...
UPDATE
Ich glaube nicht, dass ich genau ein Tortenmenü möchte ... es wird leicht durcheinander gebracht, wenn die Anzahl der Dock-Gegenstände zunimmt. Ich suche ein Spiral Dock.
und mit Spirale meine ich, dass die Menüpunkte in folgender Ausrichtung sein müssen.
4 Antworten
Ich habe es, denke ich! Dies ist nur ein grundlegendes Konzept, also passen Sie es bitte selbst an.
Siehe den folgenden JSFiddle und den folgenden Code:
%Vor%Und einige CSS zu Testzwecken:
%Vor%Update: Beantworten Sie den Kommentar
Die Funktion für yPos und xPos erzeugt Objekte nach außen, sie beginnen vom Mittelpunkt aus. Indem Sie ein anderes a und ein zusätzliches var b innerhalb des Math.cos(b*i) definieren. Es ist möglich, die Rate der angezeigten Divs und die Verteilung der gesamten Spirale zu ändern. Die Ausbreitung der Spirale wird durch a definiert, weil sie die Amplitude definiert. Die Rate, mit der divs angezeigt werden, wird durch das neue b definiert.
Also bedeutet ein kleinerer b niedrigere Winkel, bedeutet näher zusammen auf der Spirale.
Ein kleinerer a bedeutet niedrigere Amplitude, bedeutet näher beieinander in X- und Y-Achsen.
Wenn die Anzahl der Bilder nicht vorhersehbar ist, sollte das wegen der Spirale nicht von Bedeutung sein. Natürlich werden Sie Probleme haben, wenn Sie zu viel hinzufügen.
Eine andere Lösung ist, dies in PHP zu tun, weil es nichts Dynamisches zu tun hat, also können Sie dies bereits in Ihrem Backend tun. Das könnte das Gleiche mit dem Forloop und allen sein, aber dann mit dem Ausdrucken von Anweisungen in Ihrem PHP.
Ich glaube, Sie könnten etwas wie Ссылка
verwenden
Ersetzen Sie die Animate-Funktion im Plugin durch eine einfache .css-Datei ({'margin-left': x, 'margin-top': y}) sind schon da, du musst nur das animierte in eine statische Position transformieren (gibt einen anderen Offset für jedes Element im Menü)
Entschuldigung, ich hatte keine Zeit, etwas Code zu schreiben, es ist einfacher zu tun als zu erklären: D