梯形导航菜单鼠标互动

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）

Answer 1

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

Imagemap +悬停事件

您可以使用位于导航上方的透明图像映射，并使用区域标记上的href属性。这些区域可能是像您的导航项目一样的梯形。

RaphaelJS

您可以使用RaphaelJS在导航上绘制形状并绑定到鼠标悬停/点击事件。

普通Javascript

您可以只计算光标的位置并使用普通的javascript触发相应的链接。