CSS,右侧传出菜单
问题描述:
如何在离开时制作菜单只能在点击十字后隐藏?因为现在当你打开菜单时你可以点击任何地方,他会隐藏起来。CSS,右侧传出菜单
https://jsfiddle.net/fm7ayygc/
<nav class="site-nav">
<button class="side-menu-trigger"><span class="glyphicon" style=" font-size: 10px; margin-right: 3px;">
</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);
}
答
你不能得到你想要的只有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";
}
});
您能否澄清一下您的问题到底是什么? –
当你打开菜单,然后点击你想要在菜单之外的任何地方时,他会隐藏起来,我不喜欢它,我只需要当我想要时消失,当我点击十字架 –