Home/ Questions/Q 6732857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:42:00+00:00

I have designed a navigation menu which uses trapeziums instead of rectangles. I have

  • 0

I have designed a navigation menu which uses trapeziums instead of rectangles. I have got something working but it doesn’t behave properly. I have tried using a negative left margin of -15px to offset the link but this doesn’t appear to work.

The following illustration demonstrates what I have working along with that desired. Given the same cursor position “Brokerage” should be highlighted instead of “Services” (with hover or click).

How can I fix this? Is there a better way to achieve this (baring in mind that I want compatibility with IE7+)

Illustration of current and desired behaviour

Here is the HTML structure of the navigation menu:

<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>

Here is the 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;
}

Here is the img/nav.png image, please note that bottom strip of image contains a white triangle that is used to cover start of first navigation item.

Image used for navigation items

^—–^ White triangle here – remainder is transparent (PNG-24)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think that there are at least three solutions of which two use javascript:

    Imagemap + hover event

    You could use a transparent imagemap that lies over the navigation and use the href attribute on the area tags. The areas could be trapezoids like your navigation items.

    RaphaelJS

    You could use RaphaelJS to draw shapes over the navigation and bind to mouseover/click events.

    Plain Javascript

    You could just calculate the position of the cursor and trigger the appropriate link with plain javascript.

    • 0