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 변형 속성을 사용하십시오.

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

}

하지만 난 유

enter image description here

Answer 2

이 시도하려는 등 정확히 볼 것이다 responsive.but 보이지 않는 것입니다 생각 : 대한

jsfiddle.net/TiG3R/bLksqtpw 

navbar 회전 navbar div를 회전시키지 말아야합니다. 예를 들어보세요.