0

I have to make a menu with diagonally aligned tabs. This is what I'd like to obtain :

enter image description here

The thing is, I can't use CSS3 for compatibility reasons. I found a simple solution using images only (with jQuery-rotate) but it raises accessibility issues so I'd like to avoid it.

What would be the most efficient way to do this using CSS and a bit of JS?

Thanks for your help.

morgi
  • 1,005
  • 3
  • 17
  • 24
  • It is impossible to rotate text without using CSS3. All other solutions will be image/canvas-based. – Alexander Pavlov Jun 04 '12 at 10:14
  • Try this. [http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery][1] [1]: http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery – maksbd19 Jun 04 '12 at 12:06
  • Image based would be fine, I just want to avoid hard-coded solutions. – morgi Jun 04 '12 at 12:22

2 Answers2

0

Use a html <map>. It is widely supported and easy to use. See http://w3schools.com/tags/tag_map.asp for more information.

Jonas Äppelgran
  • 2,617
  • 26
  • 30
0

Hey now you can used css3 transform: rotate for this navigations

as like this

Css

    .navi{
    list-style:none;
        margin-top:40px;
    }

    .navi li{
    float:left;
        margin-left:-10px;
    }

    .navi li a{
    background:#000;
        padding:0px 40px;
        line-height:40px;
        display:block;
        color:#fff;
        -moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
    }

HTML

<ul class="navi">
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
</ul>

Live demo http://jsfiddle.net/fAkAe/2/

Upated Demo http://jsfiddle.net/fAkAe/3/

Give to li margin-left:-xxxx

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • I already tried something like that, despite the fact that it uses CSS3 I'm having trouble having equal-width tabs. – morgi Jun 04 '12 at 12:12
  • @morgi Now you can define your li margin-left accoding to as like this Demo is here http://jsfiddle.net/fAkAe/3/ – Rohit Azad Malik Jun 04 '12 at 12:22