Question

我正在尝试在CSS中为学校项目创建一个圆形菜单。

这就是菜单的样子：

enter image description here

我不是在寻找完整的资料来源只是了解经验丰富的开发人员会如何做到这一点。

我正在考虑创建8个三角形，然后在中间放置一个绝对位置的圆形div; 但三角形，因为它们是用边框创建的，当你将它们悬停时，它们不是绝对可以选择的。这有点儿马车。

甚至可以在没有图像的情况下创建它吗？

编辑：

菜单将通过动画使用jQuery;因此我将使用jQuery和jQuery UI，但没有其他库和没有图像（我不需要图标）。至于兼容性，应该适用于IE9 + / Chrome / Opera 11.52+ / Firefox 4 +。

Answer 1

以下是使用HTML canvas进行操作的方法，它可以检测鼠标的完美位置。它看起来与你的看起来并不完全相同，而且我没有添加图标或分割线（尽管抗锯齿允许背景在区域之间显示一点点，从而产生绘制线条的幻觉）。

http://jsfiddle.net/jcubed111/xSajL/

修改 - 错误修正：http://jsfiddle.net/jcubed111/xSajL/2/

通过更多工作，您可以使画布版本看起来与您的模型相同，我的版本只是为了降低功能。

您还可以使用css使其看起来正确，然后覆盖清除a以检测鼠标位置并提供链接功能。当然，您无法使用:hover来更改区域的外观。

我仅在Chrome 19中测试过。

以下是链接关闭时的完整代码：

HTML：

<a id='link'><canvas id='c' width='224' height='224' onmousemove="update(event);"></canvas></a>
<input id='i' />

CSS：

#c{
    width:224px;
    height:224px;
}

JS（在页面加载上运行并使用jquery）：

ctx = $('#c')[0].getContext('2d');


function update(E) {
    ctx.clearRect(0, 0, 224, 224);
    if (E === false) {
        mx = 112;
        my = 112;
    } else {
        mx = E.clientX;
        my = E.clientY;
    }

    mangle = (-Math.atan2(mx-112, my-112)+Math.PI*2.5)%(Math.PI*2);
    mradius = Math.sqrt(Math.pow(mx - 112, 2) + Math.pow(my - 112, 2));

    $('#i').val("Not over any region");
    $('#link').attr('href', '');
    for (i = 0; i < 8; i++) {
        angle = -Math.PI / 8 + i * (Math.PI / 4);

        if (((mangle > angle && mangle < (angle + Math.PI / 4)) || (mangle > Math.PI*15/8 && i==0)) && mradius<=112 && mradius>=69) {
            ctx.fillStyle="#5a5a5a";
            $('#i').val("In region "+i);
            $('#link').attr('href', '#'+i);
        } else {
            ctx.fillStyle="#4c4c4c";
        }

        ctx.beginPath();
        ctx.moveTo(112, 112);
        //ctx.lineTo(112+Math.cos(angle)*112, 112+Math.sin(angle)*112);
        ctx.arc(112, 112, 112, angle, angle + Math.PI / 4, false);
        ctx.lineTo(112, 112);
        ctx.fill();


    }

    ctx.fillStyle = "#f2f2f2";
    ctx.beginPath();
    ctx.arc(112, 112, 69, 0, 2 * Math.PI, false);
    ctx.fill();
}

update(false);

Answer 2

可以使用常规HTML + CSS完成，但为了您的理智，请不要尝试。这不值得。

在Canvas或SVG中做这样的事情要好得多。特别是如果您不需要支持旧版本的IE。

对于Canvas和SVG解决方案，我建议找一个合适的库。在SVG世界中，我强烈推荐Raphael。对于Canvas，可以试试Paper。您可以在几行代码中使用这些库中的任何一个来启动和运行基础知识。

如果您必须在CSS中执行此操作（或许这是您项目的标准，或者您可能只是一个贪婪的惩罚），您需要首先使用border-radius制作圈子。然后使用1px宽的框绘制分割线，并使用transform旋转它们。你得到了照片;你可能已经发现，这并不容易。让动画制作动画将是完全的噩梦。它可以做到，作为CSS中可以实现的一个示范部分，它将非常聪明。但是当你所有的目标浏览器都支持SVG和Canvas时，在CSS中做这样的事情真的只是为了聪明而聪明。

Answer 3

HTML代码

<a class='button ctrl' href='#' tabindex='1'>★</a>
<ul class='tip ctrl'>
    <li class='slice'><div>✦</div></li>
    <li class='slice'><div>✿</div></li>
    <li class='slice'><div>✵</div></li>
    <li class='slice'><div>✪</div></li>
    <li class='slice'><div>☀</div></li>
</ul>

CSS代码

    .ctrl {
        position: absolute;
        top: 75%; left: 50%;
        font: 1.5em/1.13 Verdana, sans-serif;
        transition: .5s;
    }

    a.ctrl, .ctrl div {
        display: block;
        opacity: .56;
        background: #c9c9c9;
        color: #7a8092;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 -1px dimgrey;
      cursor: pointer;
    }

    .button {
        z-index: 2;
        margin: -.625em;
        width: 1.25em; height: 1.25em;
        border-radius: 50%;
        box-shadow: 0 0 3px 1px white;
    }

    .tip {
        z-index: 1;
        /**outline: dotted 1px white;/**/
        margin: -5em;
        width: 10em; height: 10em;
        transform: scale(.001);
        list-style: none;
        opacity: 0;
    }

.slice {
    overflow: hidden;
    position: absolute;
    /**outline: dotted 1px yellow;/**/
    width: 50%; height: 50%;
    transform-origin: 100% 100%;
}

完整代码：CSSCodeLab

Answer 4

这取决于几件事。首先，你需要动画菜单吗？第二，你需要严格使用CSS吗？你需要菜单完美对齐吗？

如果您不需要100％精确的东西，您可以使用将圆圈划分为小方块并仅使用css来完成它。

如果您需要100％准确且没有动画，可以尝试<map> map

如果你想要动画并且100％准确，那么你很可能需要像RaphaelJS这样的东西

希望它可以帮助你。

使用CSS创建循环菜单

4 个答案: