css - 使用 CSS 创建圆形菜单

Question

我正在尝试用 CSS 为学校元素创建一个圆形菜单。

这是菜单的样子:

我不是在寻找完整的源代码，只是想知道您有经验的开发人员会如何做。

我想创建 8 个三 Angular 形，然后在中间放置一个具有绝对位置的圆形 div； 但是三 Angular 形，因为它们是用边框创建的，所以当您将鼠标悬停在它们上时，它们并不是绝对可选的。这有点错误。

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

编辑:

菜单将在之后使用 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/

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

您也可以使用 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);​