5

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

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

因此，该菜单是通过为每个列表项提供一个具有索引（p1、p2、p3 ...）的类来完成的，然后子圈子具有类（s1、s2、s3...）。然后这些项目从它们的类中被 -webkit-transformed 到适当的位置。

有没有办法做到这一点，而不必将类硬编码到元素上并为每种类型写出 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 返回的对象性质，实际代码稍微复杂一些，但作为示例，这应该可以为您提供要点。

4

2 回答 2

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 的转换相对于前一个转换，您可能会获得一部分。

于 2012-04-16T13:25:22.820 回答
0

如果你真的想发疯，你总是可以在 DOM 中构建 CSS。

于 2012-04-16T15:51:07.757 回答