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，右侧传出菜单

回答

相关问题