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

あなたのデフォルトのnavbarでcss transformプロパティを使用してください。

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

}

が、私はuが

enter image description here

Answer 2

はこれを試して欲しいなど、それは正確になりますresponsive.but見ていないだろうと思う：用

jsfiddle.net/TiG3R/bLksqtpw 

あなたはnavbarを回転させるべきですnavbar divを回転させない、例を見てください