Question

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

This is what the menu would look like:

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

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?

EDIT:

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+.

Answer 1

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/

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.

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.

I’ve tested in Chrome 19 only.

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 (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);​