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

您可以使用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相对于前一个变换，你可能能够获得部分路径。

Answer 2

如果你真的想发疯，你总是可以建立CSS in the DOM。

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

2 个答案: