Question

我正在使用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;
  }

  ...

我有两个问题，首先，我想分享我的意图： Circular Menu Design

我想设计一个像这样的动态循环菜单。

问题1：如何动态地最小化CSS编码，因为我实际上是第一个，增加了值，在某些地方之后，减少了margin-left的值。登记/> 问题2：我还有其他方法可以做这样的循环动态菜单吗？

Answer 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;
}

Answer 2

最好的方法是使用一些简单的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将动态定位它们

Answer 3

为动态代码创建冗余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');
        }
    }
});

这是未经测试的代码，可能存在一些错误。如有任何问题，请评论。上面的代码可以缩小很多，我刚才详细说明了，你可以理解这个概念。

圆形动态菜单 - CSS3

3 个答案: