3

我正在尝试用纯 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;
        }

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

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

更新：

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

4

1 回答 1

4

在摆弄了我的小提琴（很长一段时间）之后，我想我终于让它令人满意地工作了。 小提琴在这里可用

的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 的小提琴让我走上了正确的轨道来完成这项工作。

更新：

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

于 2013-04-22T07:01:02.710 回答