4

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

melhosseiny
  • 9,992
  • 6
  • 31
  • 48
TimFoolery
  • 1,895
  • 1
  • 19
  • 29

2 Answers2

4

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.
melhosseiny
  • 9,992
  • 6
  • 31
  • 48
  • Sorry... I didn't see the last line of your answer. :) – TimFoolery Jun 15 '11 at 21:43
  • http://caniuse.com/transforms2d Looks like that's a no-go on account of IE8. :( – TimFoolery Jun 15 '11 at 21:53
  • 1
    This is really interesting, but why wouldn't you just use an image map? It would be exceedingly difficult to get the navigation to appear as cleanly as it does in his original post (not to mention consistently across browsers) just using CSS. The fiddle you posted definitely suffers from a case of the jaggies. The overhead of a single image, especially given that it will be cached immediately and only really overhead on the first load, seems pretty inconsequential. This just seems like a lot of work to avoid using a very simple, 100% browser supported construct. – Jamie Treworgy Jun 16 '11 at 13:06
  • @jamitre i agree 100%, but the OP asked for another way. – Jason Jun 16 '11 at 16:13
  • @jamietre Yes, with some OS and browser combinations you will see the jaggies. Aside from that, it can look exactly the same as it does in the original post in all browsers with little effort. The overhead of a single image comes into play when you're building scalable websites that are going to be used by _millions_ of users. The best http-request is the one that you never make! And think about that: What if the OP suddenly decides to have a hover effect? – melhosseiny Jun 16 '11 at 18:12
  • I guess my point is -- yeah there's a way to make this work (mostly) using just CSS, but it's applicability is limited to a certain kind of paralleogram shape, and it doesn't render consistently. Hover effects do require more work, yes, but also can be done with scripting (and the work's already been done by others). I'm not buying overhead for one image used on a menu, though. That's such a non-issue it's not even worth discussing. Amazon.com is one of the most image-heavy websites I know. This isn't 1995. Anyway - you did answer his question, I just am not sure it's a "better" way. – Jamie Treworgy Jun 16 '11 at 18:23
  • Just to be clear I really do think the technique is really interesting and clever, and I'm glad to have learned about it. I think there are probably situations where it could be really useful. I'm just not convinced that for a site navigation, it's going to give as pleasing results as the old-fashioned way. – Jamie Treworgy Jun 16 '11 at 18:29
1

Without seeing any code or anything of what you're actually trying to accomplish, I can say vaguely, yes. You can use lists with id'd list items and manually place them on your page.

But again, without seeing what you're trying to accomplish it's very hard to say.

Jason
  • 51,583
  • 38
  • 133
  • 185