javascript - この CSS メニューはどのように作成されますか?

Question

私は円形メニューの作成を検討しており、これまでのところ、円形の配置を Javascript で動作させることができますが、純粋な CSS の代替手段を実現することにまだ興味があります。

私の調査で、このメニューを発見しました: http://www.cssplay.co.uk/menus/cssplay-round-and-round.html。

そのメニューは、すべての単一のリスト項目にインデックス (p1、p2、p3 ...) を持つクラスを与えることによって行われ、サブサークルの子にはクラス (s1、s2、s3 ...) があります。次に、アイテムはそのクラスから適切な場所に -webkit-transformed されます。

クラスを要素にハードコードし、各タイプの CSS ルールを書き出すことなく、これを行う方法はありますか? そうでない場合、JS でこれを行う最善の方法は何ですか?

---

私がこれまでに持っているもの

要素をJavascriptで完全に配置することで目的の効果を達成しましたが、このスタイルのソリューションにはあまり興味がありません。コードは次のようになります。

var circles = document.getElementsByClassName('circle');
var radius = circles.style.height / 2;

for(var i = 0; i < circles.length; i++) {
    var items = circles.children;
    for(var i = 0; i < items.length) {
        items.style.left = 0 + cos((i / items.length) * 360) * radius;
        items.style.top = 0 + cos((i / items.length) * 360) * radius;
    }
}

style.width の戻り値がオブジェクトであるため、実際のコードはもう少し複雑ですが、例として、これで要点がわかります。

Answer 1

nth-of-type疑似クラスを使用できます。たとえば、代わりに

ul.circles:hover li.p1 { ... }
ul.circles:hover li.p2 { ... }
ul.circles:hover li.p3 { ... }
...

使用できます

ul.circles:hover li:nth-of-type(1) { ... }
ul.circles:hover li:nth-of-type(2) { ... }
ul.circles:hover li:nth-of-type(3) { ... }
...

したがって、(p1、p2、p3...) および (s1、s2、s3 ...) クラスを HTML から削除します。

残念ながら、メニュー内の項目数を把握し、項目ごとにルールを作成する必要があります。

display: table-rowCSS でより洗練された解決策が可能であるとすれば、行が円で囲まれている場所のようなものが必要になるでしょう。各リーの変換を前のものと比較して行うことができれば、道のりの一部を得ることができるかもしれません.

Answer 2

本当にクレイジーになりたい場合は、いつでもDOM で CSS を構築できます。