¿Cómo se crea este menú CSS?

Question

He estado buscando crear un menú circular y hasta ahora, puedo obtener el posicionamiento circular trabajando con Javascript, pero aún estaría interesado en lograr una alternativa pura de CSS.

En mi investigación descubrí este menú: http://www.cssplay.co.uk/menus/cssplay-round-and-round.html.

Para que ese menú se haya hecho dando a cada elemento de la lista una clase con un índice (p1, p2, p3 ...), los niños de los círculos secundarios tienen las clases (s1, s2, s3 ...). Luego los elementos son -webkit-transformados en su lugar desde su clase.

¿Hay alguna manera de hacer esto sin tener que codificar las clases en los elementos y escribir las reglas de CSS para cada tipo? Si no, ¿cuál es la mejor manera de hacer esto con JS?

---

Lo que tengo hasta ahora

He conseguido el efecto deseado por absolutamente posicionamiento de los elementos con Javascript, sin embargo no estoy realmente interesado en este tipo de solución. El código es el siguiente:

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

el código real es un poco más complejo debido a la naturaleza objeto de la devolución de style.width, sino como un ejemplo esto debe darle la esencia de las cosas.

Answer 1

Puede usar la pseudoclase nth-of-type. Por ejemplo en lugar de

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

Puede utilizar

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

Y así eliminar las clases (p1, p2, p3, ...) y (S1, S2, S3 ...) desde el HTML .

Lamentablemente, aún así es necesario que conozca la cantidad de elementos en el menú y escriba una regla para cada artículo.

Si una solución más elegante fuera posible en CSS, tendría que haber algo como display: table-row donde la fila está envuelta alrededor de un círculo. Es posible que puedas obtener parte del camino si pudieras hacer cada transformación de li en relación con la anterior.

Answer 2

Si realmente quieres volverse loco, siempre puedes construir el CSS in the DOM.