使用CSS创建循环菜单

Question

我正在尝试在CSS中为学校项目创建一个循环菜单.

这就是菜单的样子:

我并不是在寻找完整的资源,而只是了解经验丰富的开发人员是如何做到这一点的.

我正在考虑创建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 中做这样的事情真的只是为了聪明而聪明。