CSS, 오른쪽에있는 나가는 메뉴

Question

떠날 때 메뉴를 만드는 방법은 십자가를 클릭 한 후에 만 ​​숨길 수 있습니까? 왜냐하면 지금은 언제 u 열어 메뉴 u는 아무 데나 클릭하고 그는 숨어 것입니다.

https://jsfiddle.net/fm7ayygc/

<nav class="site-nav"> 
    <button class="side-menu-trigger"><span class="glyphicon" style=" font-size: 10px; margin-right: 3px;">&#xe234; 
    </span>Pokaż menu</button> 
    <aside class="side-menu"> 
     <div class="row center-block"> 
     <div class="col-md-3"> 
      <h4>Menu</h4> 
     </div> 
     </div> 
    </aside> 
    </nav> 

CSS

.site-nav { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    padding: 10px; 
    box-sizing: border-box; 
    height: 20px; 
    width: 100%; 
} 

.side-menu-trigger { 
    margin-top: 90px; 
    position: absolute; 
    right: 0; 
    background-color: #0079BF; 
    border: 0; 
    text-decoration: underline; 
    } 

.side-menu { 
    position: absolute; 
    height: 100%; 
    width: 300px; 
    top: 40px; 
    right: -300px; 
    padding: 0; 
    background: #EDEFF0; 
    transition: 0.3s transform ease-in-out; 

    } 

.side-menu-trigger:focus ~ .side-menu, .side-menu:hover { 
    transform: translateX(-300px); 

    } 

Answer 1

당신은 단지 CSS로 원하는 기능을 얻을 수 없다, 당신은 자바 스크립트가 필요합니다. 메뉴를 열고 닫으려면 아래 코드를 옵션으로 생각하십시오. 이 버튼은 단순한 display 토글이며 현재 가지고있는 방식대로 슬라이드하지 않습니다. 나는 애니메이션 연구를 너에게 맡길거야.

var menu = document.getElementById('side-menu'); 
var menuLink = document.getElementById('side-menu-trigger'); 

menuLink.addEventListener("click", function() { 
    if (menu.style.display=="block") { 
    menu.style.display="none"; 
    } else { 
    menu.style.display="block"; 
    } 
});