Search code examples
htmlnavigationimagemaparea

What are some reasonable alternatives to an image <area> map?

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

Solution

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