2012-06-04 4 views
0

대각선으로 정렬 된 탭이있는 메뉴를 만들어야합니다.대각선으로 정렬 된 탭이있는 메뉴 만들기

enter image description here

건이며, 내가 호환성을 위해 CSS3를 사용할 수 없습니다 : 이것은 내가 얻을 싶은 것입니다. 나는 이미지를 사용하는 단순한 솔루션을 (jQuery-rotate와 함께) 찾았지만 접근성 문제를 야기하므로 피하고 싶다.

CSS와 JS를 사용하여 가장 효율적인 방법은 무엇입니까?

도움 주셔서 감사합니다.

+0

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

Upated 데모 http://jsfiddle.net/fAkAe/3/

가주십시오. 다른 모든 솔루션은 이미지/캔버스 기반입니다. –

+0

시도해보십시오. [http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery][1] [1] : http://stackoverflow.com/questions/382591/ rotate-a-div-element-in-jquery – maksbd19

+0

이미지 기반은 괜찮을 것입니다. 하드 코딩 된 솔루션은 피하고 싶습니다. – morgi

답변

0

이봐 지금은 CSS3변환 사용 가능 :이 네비게이션이

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> 

라이브 데모 CSS3를 사용하지 않고 텍스트를 회전하는 것은 불가능 li margin-left:-xxxx

+0

이 IE에서 작동합니까? – Valli69

+0

전용 9+ ............. –

+0

나는 CSS3를 사용한다는 사실에도 불구하고 동일한 크기의 탭을 사용하는 데 어려움을 겪고 있습니다. – morgi

관련 문제