Home/ Questions/Q 6020985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T03:38:50+00:00

Is <area> still the best way to handle irregular navigation menus, or is there

  • 0

Is <area> still the best way to handle irregular navigation menus, or is there a better way?

My navigation menu looks like this:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use standard navigation markup:

    <div id="nav">
    <ul>
        <li><a class="active" href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

    and then do a 2D CSS transform (skew the element around the Y axis):

    #nav {
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1, M12=0,
        M21=-0.174532925, M22=1);
    transform: skewY(-10deg);    
}

    enter image description here

    See this fiddle for a live example. See this for browser support info.

    How to write the IE filter

    Convert -10 degrees to radian by typing this in google:

    -10 degrees to radian

    You will get:

    -10 degrees = -0.174532925 radian

    Then plug the value in M21.

    Why would you use this method

    1. You’re concerned about page load time and you don’t want another HTTP request for the image.
    2. Standard navigation markup has better semantics especially if you switch to HTML5 and use the nav element which is used by screen readers to figure out where the navigation is.
    • 0