Trình đơn CSS này được tạo ra như thế nào?

Question

Tôi đã xem xét việc tạo ra một trình đơn hình tròn và cho đến nay, tôi có thể có được vị trí tròn làm việc với Javascript nhưng vẫn sẽ quan tâm đến việc đạt được một thay thế CSS tinh khiết.

Trong nghiên cứu của mình, tôi đã phát hiện ra trình đơn này: http://www.cssplay.co.uk/menus/cssplay-round-and-round.html. Vì vậy, thực đơn đó đã được thực hiện bằng cách cho mọi mục danh sách duy nhất một lớp có chỉ mục (p1, p2, p3 ...) thì các vòng tròn con con có các lớp (s1, s2, s3 ...). Sau đó, các mục được chuyển đổi -webkit thành địa điểm từ lớp của chúng.

Có cách nào để thực hiện việc này mà không cần phải mã hóa các từ khóa vào các phần tử và viết ra các quy tắc CSS cho từng loại không? Nếu không, cách tốt nhất để làm điều này với JS là gì?

---

Những gì tôi có cho đến nay

tôi đã đạt được hiệu quả mong muốn bằng cách hoàn toàn định vị các yếu tố với Javascript, tuy nhiên tôi không thực sự quan tâm đến phong cách này của giải pháp. Mã trông giống như:

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

Mã thực tế phức tạp hơn một chút do tính chất đối tượng của việc trả về style.width, nhưng làm ví dụ này sẽ cung cấp cho bạn ý chính.

Answer 1

Bạn có thể sử dụng lớp học giả nth-of-type. Ví dụ thay vì

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

Bạn có thể sử dụng

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

Và do đó loại bỏ các lớp học (p1, p2, p3 ...) và (s1, s2, s3 ...) từ HTML .

Thật không may, bạn vẫn được yêu cầu biết số lượng mục trong menu và viết ra quy tắc cho từng mục.

Nếu một giải pháp thanh lịch hơn có thể có trong CSS, sẽ phải có một cái gì đó như display: table-row nơi hàng được bao quanh một vòng tròn. Bạn có thể nhận được một phần của cách nếu bạn có thể làm cho mỗi biến đổi của li tương đối so với trước đó.

Answer 2

Nếu bạn thực sự muốn phát điên, bạn luôn có thể xây dựng CSS in the DOM.