使用CSS创建一个循环菜单 [英] Creating a circular menu with CSS

问题描述

我试图在学校项目的CSS中创建一个循环菜单。

I'm trying to create a circular menu in CSS for a school project.

这是菜单的外观：

>

我不是在寻找完整的来源，只是一个想法你如何经验的开发人员会这样做。

I am not looking for the complete source just an idea how you experienced developers would do it.

我想创建8个三角形，然后中间的地方位置绝对的圆形div; 但三角形，因为它们是使用边框创建的，当您将鼠标悬停在其上时，它们不是绝对可选的。

I was thinking to create 8 triangles and then the middle to place a circlular div with position absolute; but the triangles, since they're created with borders, when you hover them they are not absolutely selectable. It's kinda buggy.

是否可以创建没有图片的图片？

Is it even possible to create this with no images?

编辑：

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

The menu will after by animated using jQuery; thus I will be using jQuery and jQuery UI but no other library and no images (i dont need the icons anyway). As for compatibility, should work on IE9+ / Chrome / Opera 11.52+ / Firefox 4+.

推荐答案

是一种使用HTML画布的方法，它可以检测鼠标的位置。它看起来与你的完全相同，虽然，我没有添加图标或分界线（虽然反锯齿允许背景通过一个小区域之间显示，创建线绘制的错觉）。

The following is a way to do it with HTML canvas, and it detects where the mouse is perfectly. It doesn't look the exact same as yours though, and I didn't add the icons or dividing lines (although anti-aliasing allows the background to show through a little between regions creating the illusion of lines being drawn).

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

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

Edit - Bug Fix: http://jsfiddle.net/jcubed111/xSajL/2/

有了更多工作，您可以使画布版本看起来与您的模型相同，

With more work you could make the canvas version look the same as your mock-up, my version is only to get the functionality down.

您还可以使用css查看正确，然后覆盖一个清楚的 a 检测鼠标位置并提供链接功能。当然，你不能使用：hover 来改变地区的外观。

You could also make it look right with css, then overlay a clear a to detect mouse position and provide linking functionality. Of course, then you couldn't use :hover to change the look of the regions.

以下是以下全部代码，以便链接失效：

Here's the full code below in case the link goes down:

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）：

JS (run on page load and uses 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);​

这篇关于使用CSS创建一个循环菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！