这个CSS菜单是如何创建的？

Question

我一直在寻找创建一个圆形菜单,到目前为止,我可以使用Javascript进行循环定位,但仍然有兴趣实现一个纯CSS替代品.

在我的研究中,我发现了这个菜单:http://www.cssplay.co.uk/menus/cssplay-round-and-round.html.

因此,通过为每个列表项提供一个带索引(p1,p2,p3 ...)的类来完成该菜单,然后子圈子项具有类(s1,s2,s3 ......).然后这些项目是-webkit-从他们的班级转换到位.

有没有办法做到这一点,而无需将clases硬编码到元素上,并为每种类型写出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

您可以使用第 n 个类型的伪类。例如代替

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) { ... }
...

因此从 HTML 中删除 (p1, p2, p3...) 和 (s1, s2, s3 ...) 类。

不幸的是，您仍然需要知道菜单中的项目数量并为每个项目编写规则。

如果 CSS 中可以有更优雅的解决方案，那么就必须有像行display: table-row围绕一个圆的地方。如果你可以使每个 li 的变换相对于前一个，你也许能够取得部分进展。