2

使用什么方法在网站上制作奇怪形状的菜单，如附件？圆圈的每一部分都应该是一个单独的链接。鼠标悬停应该相当精确，尤其是在中间附近。（绝对 20px 中间可能根本没有链接，如果不能 100% 精确的话）

在此处输入图像描述

我见过使用重叠矩形制作的不规则菜单，如下所示：http : //www.vanityclaire.com/ 形状是重叠的，但菜单是由矩形制成的，会发生一些作弊行为。但是，在我的情况下，重叠量太大而无法使用任何此类技术。除了使用闪存之外，是否有机会以浏览器/设备兼容的方式进行操作？

4

3 回答 3

4

实际上，您可以使用 CSS3 来实现 - 请参阅我的演示：http ://dabblet.com/gist/3116939 //

编辑：也适用于 IE9 http://dabblet.com/gist/3117278的版本

这个想法是有一个.pie带有“切片”的div

<ul class="pie">
    <li class="slice" id="s1">
        <a class="slice-contents" href="#slice1"></a>
    </li>
    <li class="slice" id="s2">
        <a class="slice-contents" href="#slice2"></a>
    </li>
<!-- and so on -->
</div>

你把馅饼做成圆盘，使用border-radius: 50%;

您倾斜和旋转每个切片。您将切片的内容恢复为非倾斜的矩形（如果您想在切片上添加文本，这也很有用），然后设置背景。

于 2012-07-15T12:30:44.710 回答
0

SVG 可以做到。但在旧浏览器中不可用。

于 2012-07-15T10:58:54.483 回答
0

您可以尝试图像映射或 SVG（带有后备/polyfill）。

于 2012-07-15T11:00:15.033 回答