垂直制表符和文本旋转

Question

我想在页面左侧而不是顶部选项卡.我已经因为其他原因(效果)加载了JQuery,所以我更喜欢将JQuery用于另一个UI框架.搜索"垂直制表符jquery"会产生正在进行中的工作的链接.

是否正在使用垂直标签在浏览器中工作,或者它是如此微不足道,一旦你有了解决方案,发布示例代码似乎不值得？

在下面的屏幕截图中,垂直选项卡以红色标出: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   (在IE8/9/10,Firefox,Chrome,Safari,Opera中测试得很好)

关键点

• 创建一个水平标签栏并一次旋转所有标签栏更简单,而不是分别旋转每个标签项.
• 避免同时使用BasicImage滤镜-ms-transform,因为旋转将在IE9中应用两次.所述BasicImage滤波器适用于IE8/9.-ms-transform适用于IE9.transform适用于IE10.使用BasicImage过滤器和transformIE8/9/10 的组合.
• 变换后的元素在变换前占据的布局中占据相同的空间(横跨屏幕宽度的水平空间),即使它显示在不同的位置.在此版本的演示中,它占用的布局空间以蓝色显示.避免在布局中占用这些不需要的空间的一种方法是给元素提供绝对位置,这样它就不会占用布局中的任何空间.另一个选择是给下一个元素一个负上边距("消耗"转换元素的布局空间).

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;
    ...
}
...