대각선으로 정렬 된 탭이있는 메뉴를 만들어야합니다.대각선으로 정렬 된 탭이있는 메뉴 만들기
건이며, 내가 호환성을 위해 CSS3를 사용할 수 없습니다 : 이것은 내가 얻을 싶은 것입니다. 나는 이미지를 사용하는 단순한 솔루션을 (jQuery-rotate와 함께) 찾았지만 접근성 문제를 야기하므로 피하고 싶다.
CSS와 JS를 사용하여 가장 효율적인 방법은 무엇입니까?
도움 주셔서 감사합니다.
대각선으로 정렬 된 탭이있는 메뉴를 만들어야합니다.대각선으로 정렬 된 탭이있는 메뉴 만들기
건이며, 내가 호환성을 위해 CSS3를 사용할 수 없습니다 : 이것은 내가 얻을 싶은 것입니다. 나는 이미지를 사용하는 단순한 솔루션을 (jQuery-rotate와 함께) 찾았지만 접근성 문제를 야기하므로 피하고 싶다.
CSS와 JS를 사용하여 가장 효율적인 방법은 무엇입니까?
도움 주셔서 감사합니다.
html <map>
을 사용하십시오. 널리 지원되며 사용하기 쉽습니다. 자세한 내용은 http://w3schools.com/tags/tag_map.asp을 참조하십시오.
이봐 지금은 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
에 http://jsfiddle.net/fAkAe/2/
Upated 데모 http://jsfiddle.net/fAkAe/3/
가주십시오. 다른 모든 솔루션은 이미지/캔버스 기반입니다. –
시도해보십시오. [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
이미지 기반은 괜찮을 것입니다. 하드 코딩 된 솔루션은 피하고 싶습니다. – morgi