CSS，右側傳出菜單

如何在離開時製作菜單隻能在點擊十字後隱藏？因爲現在當你打開菜單時你可以點擊任何地方，他會隱藏起來。CSS，右側傳出菜單

<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); 

    }

來源

2017-10-10 Aneta Jabłońska

您能否澄清一下您的問題到底是什麼？ –

當你打開菜單，然後點擊你想要在菜單之外的任何地方時，他會隱藏起來，我不喜歡它，我只需要當我想要時消失，當我點擊十字架 –

你不能得到你想要的只有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"; 
    } 
});

來源

2017-10-10 20:26:01 Tom

CSS，右側傳出菜單

回答

相關問題