22

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

这是菜单的样子：

在此处输入图像描述

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

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

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

编辑：

菜单将使用 jQuery 进行动画处理；因此我将使用 jQuery 和 jQuery UI，但没有其他库和图像（无论如何我不需要图标）。至于兼容性，应该适用于 IE9+ / Chrome / Opera 11.52+ / Firefox 4+。

4

4 回答 4

22

以下是使用 HTML 画布执行此操作的一种方法，它可以检测鼠标的完美位置。不过它看起来和你的不太一样，而且我没有添加图标或分隔线（尽管抗锯齿允许背景在区域之间稍微显示出来，从而产生绘制线条的错觉）。

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);​
于 2012-05-28T22:08:23.217 回答
5

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

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

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

如果您必须在 CSS 中执行此操作（也许这是您项目的标准，或者您只是一个受惩罚的贪吃者），您需要从 usingborder-radius开始制作圆圈。然后使用 1px 宽的框绘制分割线，并使用transform. 你明白了；这并不容易，正如您可能已经发现的那样。让这件事变得生动起来将是一场彻头彻尾的噩梦。它是可以做到的，并且作为 CSS 可以实现的东西的示范片，这将是非常聪明的。但是当你所有的目标浏览器都支持 SVG 和 Canvas 时，在 CSS 中做这样的事情真的只是为了聪明而聪明。

于 2012-05-28T22:14:03.913 回答
1

HTML 代码

<a class='button ctrl' href='#' tabindex='1'>★&lt;/a>
<ul class='tip ctrl'>
    <li class='slice'><div>✦&lt;/div></li>
    <li class='slice'><div>✿&lt;/div></li>
    <li class='slice'><div>✵&lt;/div></li>
    <li class='slice'><div>✪&lt;/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

于 2020-02-20T13:56:52.413 回答
0

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

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

如果你需要它是 100% 准确的并且你没有动画，你可以试试<map> map

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

希望它可以帮助你。

于 2012-05-28T21:10:15.500 回答