在html和css中设置右菜单栏的样式

我正在尝试用一个右边有菜单的栏来设计一个页面。我正在使用div标签。我得到的看起来很接近，但我不清楚如何在右栏中创建包含旋转菜单项div的菜单div。这张图片说明了我的意思。右栏是透明的，因此下面的主页内容可见。我想用Javascript为bar div制作动画，但已经完成了

目前，我的css中有

#menu_list {
    top: 0;
    left: 0;
    padding: 0 0;
    text-align: center;
    transform-origin: center top;
    transform: translateX(-50%) translateY(300%) rotate(-90deg);
}
#menu_list p {
    color: #fff;
    line-height: 20px;
    display: inline-block;
}

#right_bar {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        width: 30%;
        overflow: auto;
        padding: 0;
}

和作为html

<div id="bar_wrapper" onclick="toggleMenu()">
<div>
<div id="menu_list">
    <p>Info</p>
    <p>About</p>
</div>
<div style="width:30%; height:100%; position:fixed; top:0; right:0; bottom:0;">
<h4>
    Info
</h4>

</div>
</div>
</div>

信息

关于

信息

---

但是，就像我尝试过的其他方法一样，这并不能完全做到这一点。

在默认导航栏上使用css transform属性

#div_name {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); 
transform: rotate(-90deg);

}

但我认为它看起来不会有什么反应，但会和你想要的一模一样

试试这个：

jsfiddle.net/TiG3R/bLksqtpw

---

要旋转导航栏，您应该旋转导航栏div而不是旋转选项卡，请参见示例

要创建从右侧栏上下来的div，您可能只需要指定

位置：绝对

，同时指定

左侧

。然而，这很难说，因为您没有提供任何代码，或者您已经尝试过的任何示例。请看。要旋转文本，您需要

transform

属性，不幸的是，每个浏览器都有不同的属性。看，我遇到的一些麻烦似乎与文本的旋转有关。如果这太尴尬了，一个有效的替代方案可能是将菜单项作为svg图像包含在内。不完全确定您的意思。哪个是

div\u name

？我添加了一个图像。希望它能帮助您div\u name表示导航栏div name对不起，没有清除。谢谢。当我将旋转菜单嵌套在右栏div中时，我的问题就出现了。不知何故，在这些情况下，我无法正确放置。如果我粘贴代码，替换带引号的

菜单列表

div，导航栏不可见（在屏幕外）。你应该更改你的类，如果你需要再次添加id，请尝试以下操作：|这对我有用，我只需给你主代码并学习如何旋转导航栏，我就可以创建你的网站如果答案对你有效，请接受我粘贴了你的代码。问题可能是它与bar_wrapper div的样式不兼容，我需要将整个内容放在屏幕的右边缘。