圆形动态菜单 - CSS3答案

【问题标题】：Circular-like dynamic menu - CSS3圆形动态菜单 - CSS3
【发布时间】：2014-02-19 10:13:31
【问题描述】：

我正在使用 LESS。我设计了我的<li>s，每个程序都使用 PHP 循环获取不同的 id。在 CSS 中，我编写了如下代码：

  li.page-2{
    margin-left: 15px;
  }

  li.page-3{
    margin-left: 25px;
  }

  li.page-4{
    margin-left: 22px;
  }

  li.page-5{
    margin-left: 18px;
  }

  ...

我对此有两个问题，所以，首先，我想分享一下我的意图：

我想设计一个像这样的动态圆形菜单。

Q#1：如何动态最小化 CSS 编码，因为我实际上是首先增加值，然后在某些地方减少 margin-left 的值。
Q#2：有没有其他方法可以做这样的循环动态菜单？

【问题讨论】：

是否总是有相同数量的选项？这会影响您是否还需要动态设置
元素占据的圆圈百分比。

【解决方案1】：

就传统 CSS 而言，您无论如何都可以使用 LESS 或 SASS 来缩小它，而不是使用 CSS 定位技术来实现......

Demo

说明：这里，我使用position: relative; 容器，进一步嵌套absolute span 元素，我稍后使用top 和left 属性定位这些元素。

如果您正在创建动态菜单，则需要在菜单项增加时使用 LESS 轻推第 n 个元素。

HTML

<div>
    <span>Page 1</span>
    <span>Page 2</span>
    <span>Page 3</span>
    <span>Page 4</span>
    <span>Page 5</span>
</div>

CSS

div {
    height: 150px;
    width: 150px;
    margin: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

div span {
    font-family: Arial;
    font-size: 12px;
    position: absolute;
    width: 100px;
}

div span:nth-of-type(1) {
    left: 135px;
}

div span:nth-of-type(2) {
    left: 155px;
    top: 30px;
}

div span:nth-of-type(3) {
    left: 160px;
    top: 60px;
}

div span:nth-of-type(4) {
    left: 155px;
    top: 90px;
}

div span:nth-of-type(5) {
    left: 145px;
    top: 120px;
}

【讨论】：

【解决方案2】：

为动态代码创建多余的 css 样式并不是一个好习惯。我建议你研究一下javascript方式。如果有人想要 JS 方式，请研究这种方法。我已经用 Jquery 编写了代码。

HTML

<ul id='circularMenu'>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
    <li>Page 6</li>
</ul>

Javascript

var childCount = $('#circularMenu li').length();
var diff = 10; // The difference in margin for each item
var marginLeft = 0;
var currentChild = 1;

$('#circularMenu li').each(function(){
    //Skip condition, as we style this element within center elements section
    if(childCount%2 && currentChild == Math.ceil(childCount/2)) coutinue; 

    //Top half of the menu where margin is increased
    if(currentChild < childCount/2) {
        marginLeft += diff;
        this.css('margin-left', marginLeft+'px');
    }

    //Bottom half of the menu where margin is decreased
    else if(currentChild > childCount/2) {
        marginLeft -= diff;
        this.css('margin-left', marginLeft+'px');
    }

    //The center element, this is tricky as there can be one or two center elements
    else if(currentChild == Math.floor(childCount/2)) {
        marginLeft += diff;
        this.css('margin-left', marginLeft+'px');
        if(childCount%2){
            this.next().css('margin-left', marginLeft+'px');
        }
    }
});

这是未经测试的代码，可能有一些错误。请评论任何问题。上面的代码可以缩小很多，我只是详细说明一下，以便您理解这个概念。

【讨论】：

这已经结束了。等待 DOM 和 javascript 库加载一些可以用 CSS 很好地实现的东西。
@mikedidthis 如果有 20 或 40 个菜单项怎么办。如果链接较少，我同意你的看法。这会动态适应链接，并且可以对单个变量而不是 20 或 30 个 css 规则进行编辑。无论如何，我只是为了寻找这种方式的人。我的错。
我很欣赏这些意图，但这是一个设计问题。 OP 应该决定一个限制，如果他们真的想要一个动态圆圈，最坏的情况是使用 PHP（如问题标记）来帮助 CSS。
是的，迈克，感谢您的评论。我会记住这一点。祝你有美好的一天。

【解决方案3】：

最好的方法是使用一些简单的 JavaScript，如下所述：

Animated radial menu with CSS3 and JavaScript

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

您仍然可以使用 CSS3 为菜单设置动画（这在性能方面更好）。您可以添加任意数量的元素，JS 会动态定位它们

【讨论】：