我正在为一个学校项目在CSS中创建一个循环菜单。
这就是菜单的样子：
我不是在寻找完整的来源只是一个想法，你如何有经验的开发人员会这样做。
我正在想要创建8个三角形，然后在中间放置一个带绝对位置的圆环div;但是三角形因为它们是用边框创建的，所以当你悬停它们时，它们不是绝对可选的。这有点儿麻烦
甚至可以创建没有图像吗？
编辑：
菜单后会通过动画使用jQuery;因此我将使用jQuery和jQuery UI，但没有其他库和没有图像(我不需要图标反正)。
至于兼容性，应该适用于IE9 / Chrome / Opera 11.52 / Firefox 4。
解决方法
以下是使用HTML画布进行操作的方法，它可以检测鼠标的完美位置。它看起来并不完全一样，我没有添加图标或分界线(虽然反锯齿允许背景通过一些区域之间显示出绘制线条的错觉)。
http://jsfiddle.net/jcubed111/xSajL/
编辑 – 错误修复：http://jsfiddle.net/jcubed111/xSajL/2/
随着更多的工作，您可以使画布版本看起来与您的模型相同，我的版本只是为了使功能下降。
您也可以使用css看起来正确，然后重叠一个清除以检测鼠标位置并提供链接功能。当然，你不能使用：徘徊改变地区的外观。
我已经在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,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,angle,angle + Math.PI / 4,false);
ctx.lineTo(112,112);
ctx.fill();
}
ctx.fillStyle = "#f2f2f2";
ctx.beginPath();
ctx.arc(112,69,2 * Math.PI,false);
ctx.fill();
}
update(false);
