带有 css 旋转选项卡标题的侧向选项卡

Question

我正在尝试用纯 html 和 css 制作一个选项卡式菜单。

选项卡菜单包含在页面的右侧，因此选项卡显示在菜单的左侧。我想我的那部分工作正常。

我正在努力解决的是让选项卡中的文本横向旋转，以免出现可笑的长水平选项卡。

这个小提琴http://jsfiddle.net/9gPXF/这里显示了我到目前为止所拥有的。我正在努力解决的问题是使选项卡的宽度保持可管理。

相关的css代码是这样的：

    #RightMenu #Tabs > li
    {
        display: block;
        width: 3em;
        height: 4em;
        line-height: 4em;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
    }

        #RightMenu #Tabs > li > span
        {
            display: inline-block;
            line-height: 1em;
            -webkit-transform: rotate(-90deg);
            text-align: center;
        }

这些元素包含我在 css 中旋转的lia 。span问题是 的实际宽度li必须足以容纳span或 文本中断。这很烦人，因为我必须使选项卡的宽度和高度足以容纳文本。

我应该如何修改样式才能使其正常工作？

更新：

我的想法可能完全错误。如果有人知道任何其他方法可以实现这项工作，我也会将其作为答案。

Answer 1

在摆弄我的小提琴一段时间后，我想我终于让它工作得令人满意了。 小提琴可以在这里找到

html：

<div id="RightMenu">
<ul id="Tabs">
    <li><span>Menu 1</span>

    </li>
    <li><span>My really long menu</span>

    </li>
    <li><span>Menu 3</span>

    </li>
</ul>
<ul id="Menus">
    <li>
        <div>Menu 1 content</div>
    </li>
    <li>Menu 2 content</li>
    <li>Menu 3 content</li>
</ul>
</div>
<div id="Content">Content</div>

CSS：

#Content {
    width: 100%;
}
#RightMenu {
    position: absolute;
    height: 100%;
    right: 0;
    z-index: 10;
}
#RightMenu #Tabs, #RightMenu #Menus {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
}
#RightMenu #Tabs {
    position: absolute;
    white-space: nowrap;
    top: 0;
    right: 100%;
    text-align: right;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate(-90deg);
    transform-origin: 100% 100%;
    transform: rotate(-90deg);
}
#RightMenu #Tabs > li {
    display: inline-block;
    cursor: pointer;
    border: 1px solid black;
    border-bottom: none;
}

#RightMenu #Menus
{
    width: 200px;
}

#RightMenu #Menus li
{
    white-space: nowrap;
}

附加js：

$(document).ready(function () {
    $('#RightMenu #Tabs > li').click(function () {
        $('#RightMenu #Menus').animate({
            width: 'toggle'
        }, 1000);
    });
});

这应该会提供一个带有垂直选项卡的滑动右侧边栏。

感谢 Mark Ryan Sallee 的小提琴，这让我走上了正确的道路，让这项工作顺利进行。

更新：

我已经更新了这个小提琴，以便它现在可以在所有主要浏览器中运行。