Трапеция навигационное меню мыши взаимодействие

Question

Я разработал навигационное меню, в котором вместо прямоугольников используются трапеции. У меня что-то работает, но оно не ведет себя должным образом. Я пытался использовать отрицательное левое поле -15px для смещения ссылки, но это не работает.

Следующая иллюстрация демонстрирует то, что я работаю вместе с этим желаемым. При одинаковом положении курсора вместо «Службы» следует выделять «Брокерское дело» (при наведении курсора или нажатии).

Как я могу это исправить? Есть ли лучший способ добиться этого (учитывая, что я хочу совместимость с 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:

Карта изображений + событие наведения мыши

Вы можете использовать прозрачную карту изображений, которая находится над навигацией, и использовать атрибут href.на метках области.Области могут быть трапециевидными, как ваши элементы навигации.

RaphaelJS

Вы можете использовать RaphaelJS, чтобы рисовать фигуры поверх навигации и привязывать события мыши / нажатия.

Простой Javascript

Вы можете просто рассчитать положение курсора и вызвать соответствующую ссылку с простым javascript.