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

Question

私は循環型メニューの作成を検討してきましたが、これまではJavaScriptを使用した循環配置を取得できましたが、純粋なCSS代替を達成することには依然として関心があります。

私の研究で私はこのメニューを発見した：http://www.cssplay.co.uk/menus/cssplay-round-and-round.html。

このように、すべての単一リストアイテムにインデックス（p1、p2、p3 ...）を持つクラスを与えることでメニューを完成させると、サブサークルの子供はクラス（s1、s2、s3 ...）を持ちます。次に、アイテムは、そのクラスから場所に変換された-webkitに変換されます。

要素にハードコードをハードコードしなくても、タイプごとに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 ...）を削除し、HTMLから（S1、S2、S3 ...）クラスすることができます。

残念ながら、メニュー内のアイテムの数を知り、各アイテムのルールを書き留める必要があります。

さらに洗練されたソリューションがCSSで可能だった場合は、行が円で囲まれたdisplay: table-rowのようなものが必要です。以前のものと比較して各liの変換を行うことができれば、あなたは方法の一部を得ることができるかもしれません。

Answer 2

あなたが本当に夢中になりたい場合は、いつでもCSS in the DOMを構築することができます。