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

Question

我正在尝试使用带有菜单的右侧栏来设置页面样式。我正在使用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>

但是，就像我尝试的其他事情一样，并不是这样。

Answer 1

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

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

}

但我觉得它看起来没有响应。但看起来会像你想要的那样

enter image description here

Answer 2

试试这个：

jsfiddle.net/TiG3R/bLksqtpw

对于旋转导航栏，你应该旋转导航栏div而不是旋转标签，看看例子