How is this CSS menu created?

Question

I have been looking at creating a circular menu and so far, I can get the circular positioning working with Javascript but would still be interested in achieving a pure CSS alternative.

In my research I discovered this menu: http://www.cssplay.co.uk/menus/cssplay-round-and-round.html.

So that menu has been done by giving every single list item a class with an index (p1, p2, p3 ...) then the sub circles children have the classes (s1, s2, s3...). Then the items are -webkit-transformed into place from their class.

Is there any way to do this without having to hardcode the clases onto the elements and write out the CSS rules for each type? If not, what is the best way to do this with JS?

---

What I have so far

I have achieved the desired effect by absolutely positioning the elements with Javascript, however I'm not really interested in this style of solution. The code looks like:

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

The actual code is a bit more complex because of the object nature of the return of style.width, but as an example this should give you the gist of things.

Answer 1

You can use the nth-of-type pseudo-class. For example instead of

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

You can use

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

And thus remove the (p1, p2, p3...) and (s1, s2, s3 ...) classes from the HTML.

Unfortunately, you're still required to know the number of items in the menu and write out a rule for each item.

If a more elegant solution was possible in CSS, there would have to be something like display: table-row where the row is wrapped around a circle. You might be able to get part of the way if you could make each li's transform relative to the previous one.