Question

我正在尝试使用纯HTML和CSS进行选项卡式菜单。

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

我正在努力解决的问题是让标签中的文字向侧面旋转，以免出现可笑的长水平标签。

这个fidle 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;
        }

li元素包含我在css中旋转的span。问题是li的实际宽度必须足以容纳span或文本中断。这很烦人，因为我必须使标签既宽又高，足以用于文本。

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

更新：

我可能会对此完全错误。如果有人知道任何其他方式来完成这项工作，我也会把它作为答案。

Answer 1

在摆弄了我的小提琴（很长一段时间）之后，我想我终于让它圆满地工作了。 The fiddle is available here

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的小提琴，让我走上了正确的道路，让它发挥作用。

更新：

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

带有css旋转标签页的侧面标签

1 个答案: