CSS、右にある発信メニュー

Question

メニューを作成する方法は、十字をクリックした後にのみ非表示にできますか？なぜなら、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に必要な機能を得ることができない、あなたにはJavaScriptが必要になります。メニューを開いたり閉じたりするオプションとして以下のコードを考えてみましょう。これは単純な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"; 
    } 
});