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

Question

我一直在考虑创建一个圆形菜单，到目前为止，我可以使用 Javascript 实现圆形定位，但仍然对实现纯 CSS 替代方案感兴趣。

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

因此，通过为每个列表项提供一个带有索引的类(p1、p2、p3 ...)来完成菜单，然后子圆圈的子级具有类(s1、s2、s3 ...)。然后这些元素从他们的类(class)-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) { ... }
...

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

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

如果在 CSS 中可能有更优雅的解决方案，则必须有类似 display: table-row 的东西，其中行环绕一个圆圈。如果您可以使每个 li 相对于前一个 li 进行转换，则您可能能够完成部分工作。