梯形导航菜单鼠标交互

Question

我设计了一个导航菜单，使用了梯形而不是矩形。我已经有了一些工作成果，但它的行为不正确。我尝试使用负左边距-15px来偏移链接，但这似乎没有起作用。

以下示例演示了我正在使用的内容以及所需内容。给定相同的光标位置，“Brokerage”应该突出显示，而不是“Services”（带有悬停或单击）。

我该如何解决这个问题？有更好的方法实现吗（考虑到我想要与IE7+兼容）？

以下是导航菜单的HTML结构：

<nav>
   <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Brokerage</a></li>
      <li><a href="#">Services</a></li>
      <li class="first current"><a href="#">Home</a></li>
   </ul>
</nav>

这里是CSS代码：

nav ul li {
    display: block;
    float: right;
    margin-left: -30px;
    line-height: 69px;

    text-align: center;
    font-size: 16pt;

    background: url(img/nav.png) no-repeat right -69px;
}
nav ul li:hover {
    background: url(img/nav.png) no-repeat right -207px;
}
nav ul li.current {
    background: url(img/nav.png) no-repeat right 0px;
}
nav ul li.current:hover {
    background: url(img/nav.png) no-repeat right -138px;
}

nav ul li.first a {
    background: url(img/nav.png) no-repeat left bottom;
}
nav ul li a {
    display: block;
    float: left;
    padding: 0 26pt;

    text-decoration: none !important;
    color: #4e649f;
}
nav ul li:hover a {
    color: #9e4e4e !important;
}
nav ul li.current a {
    color: #fff !important;
}

这里是img/nav.png图像，请注意图像的底部条带包含一个白色三角形，用于覆盖第一个导航项的开头。

^-----^ 这里是白色三角形 - 其余部分为透明的（PNG-24）

- Lea Hayes

Answer 1

我认为至少有三种解决方案，其中两种使用了javascript：

图像映射+悬停事件

您可以使用透明的图像映射覆盖在导航上，并在区域标签上使用href属性。这些区域可以是梯形，就像您的导航项一样。

RaphaelJS

您可以使用RaphaelJS在导航上绘制形状，并绑定mouseover/click事件。

纯Javascript

您可以仅计算光标的位置并使用纯Javascript触发相应的链接。

- topek

---

如果我选择RaphaelJS，是否会出现与Web浏览器的兼容性问题？SVG支持是否需要插件？ - Lea Hayes

RaphaelJS是一个非常稳定的库，长期支持所有主要浏览器。从网站上来看，Raphaël目前支持Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+和Internet Explorer 6.0+。 - topek

经过一些实验后，我得出结论：纯 JavaScript 是最佳解决方案。如果启用了 JavaScript，则会创建其他 DIV 元素并将其定位为所需的位置。这些元素会自动触发底层元素的状态更改。这种方法的好处是，即使添加了新的菜单项，也不必担心更改 JavaScript。即使禁用了 JavaScript，它仍然可以工作，只是点击不太准确。 - Lea Hayes

再次感谢，我已经为了未来读者的利益，在你的答案中添加了一个JavaScript实现示例。 - Lea Hayes