Tab dọc và xoay văn bản

Question

Tôi muốn các tab dọc theo bên trái của trang thay vì trên đầu trang. Tôi đã tải JQuery vì các lý do khác (các hiệu ứng), vì vậy tôi thích sử dụng JQuery cho một khung công tác UI khác. Tìm kiếm trên các liên kết sản phẩm "tab dọc jquery" có liên quan đến các công việc đang được tiến hành.

Làm cho các Tab dọc hoạt động trên các trình duyệt đầy hay không, một khi bạn có giải pháp, có vẻ như không đáng giá để đăng mã mẫu?

Trong hình bên dưới, các tab dọc được nêu trong màu đỏ: http://cl.ly/image/2y0t1f1L0u00

#tab li { 
    cursor: pointer; 
    font-size: 12px; 
    line-height: 12px; 
    background: #fff; 
    border: 1px solid #000; 
    padding: 10px; 
    color: #fff; 
    font-weight: bold; 
    font-size: 20px; 
    width: 140px; 
    height: 130px; 
    padding: 0 !important; 
    -webkit-transform: rotate(-90deg) translate(-30px, 60px); 
     -moz-transform: rotate(-90deg) translate(-30px, 60px); 
     -ms-transform: rotate(-90deg) translate(-30px, 60px); 
     -o-transform: rotate(-90deg) translate(-30px, 60px); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 
#tab li a { 
    display: inline; 
    margin: 55px 0 0 -25px; 
} 

Answer 1

JSFiddle Demo   (thử nghiệm tốt trong IE8/9/10, Firefox, Chrome, Safari, Opera)

Các điểm chính

• Đơn giản hơn để tạo thanh tab ngang và xoay tất cả tại tab e, thay vì xoay từng mục tab một cách riêng biệt.
• Tránh sử dụng cả bộ lọc BasicImage và -ms-transform, vì xoay vòng sẽ được áp dụng hai lần trong IE9. Bộ lọc BasicImage áp dụng cho IE8/9. -ms-transform áp dụng cho IE9. transform áp dụng cho IE10. Sử dụng kết hợp bộ lọc BasicImage và transform bao gồm IE8/9/10.
• Phần tử được chuyển đổi chiếm cùng một không gian trong bố cục mà nó chiếm trước khi chuyển đổi (không gian ngang trên chiều rộng của màn hình), mặc dù nó được hiển thị ở một vị trí khác. Trong này version of the demo, không gian bố trí nó chiếm được thể hiện bằng màu xanh lam. Một cách để tránh việc không gian không mong muốn này được thực hiện trong bố cục là cung cấp cho vị trí tuyệt đối của phần tử, để nó không chiếm bất kỳ khoảng trống nào trong bố cục. Một tùy chọn khác là cung cấp cho phần tử tiếp theo một lề trên tiêu cực (để "tiêu thụ" không gian bố trí của phần tử được chuyển đổi).

HTML

<div class="wrapper"> 
    <ul id="tab"> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
     <li><a href="#">Four</a></li> 
    </ul> 
</div> 

CSS

.wrapper { 
    position: relative; 
    width: 488px; 
} 
#tab { 
    position: absolute; 
    height: 52px; 
    -webkit-transform-origin: 0 0; 
     -moz-transform-origin: 0 0; 
     -o-transform-origin: 0 0; 
      transform-origin: 0 0; 
    -webkit-transform: rotate(-90deg) translate(-488px, 0px); 
     -moz-transform: rotate(-90deg) translate(-488px, 0px); 
     -o-transform: rotate(-90deg) translate(-488px, 0px); 
      transform: rotate(-90deg) translate(-488px, 0px);   /* IE10 */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE8/9 */ 
    ... 
} 
#tab li { 
    float: left; 
    width: 120px; 
    height: 50px; 
    border: 1px solid #000; 
} 
#tab li a { 
    display: block; 
    padding: 10px; 
    ... 
} 
... 

Answer 2

Mở rộng về câu trả lời Matt Coughlin, điều này làm việc cho tôi tốt hơn, mà không cần phải hardcode độ dài bằng pixel, do đó các tab có thể có độ dài biến đổi:

#tab { 
    position: absolute; 
    -webkit-transform-origin: 100% 0; 
     -moz-transform-origin: 100% 0; 
     -o-transform-origin: 100% 0; 
      transform-origin: 100% 0; 
    -webkit-transform: translate(-100%, 0) rotate(-90deg); 
     -moz-transform: translate(-100%, 0) rotate(-90deg); 
     -o-transform: translate(-100%, 0) rotate(-90deg); 
      transform: translate(-100%, 0) rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

Nó đặt nguồn gốc biến đổi ở góc trên cùng bên phải của dải tab, sau đó trước tiên dịch toàn bộ dải còn lại 100% và cuối cùng thực hiện xoay vòng.