Укладка правой панели меню в html и css

Question

Я пытаюсь создать страницу с правой панелью, имеющей меню. Я использую теги div. То, что я получаю, выглядит близко, но мне не очевидно, как создать меню div в правой панели, которая должна содержать поворотные элементы меню. Изображение иллюстрирует, что я имею в виду. Правая полоса прозрачна, так что отображается содержимое главной страницы ниже. Я хочу анимировать панель div с Javascript, но это уже сделано.

В настоящее время у меня в 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); 

}

, но я думаю, что это не будет выглядеть responsive.but будет выглядеть точно так, как и хотят

enter image description here

Answer 2

попробовать это:

jsfiddle.net/TiG3R/bLksqtpw 

для вращая навигатор, вы должны вращать navbar div, не вращая вкладки, посмотрите на пример