选择选项时关闭滑出菜单

Question

我找到了一个很棒的幻灯片菜单，用于我建立的网站。

http://www.sitepoint.com/pure-css-off-screen-navigation-menu/

我想知道当我选择其中一个列表项时，是否有人知道如何关闭菜单。

我构建的页面是单页设计，我希望用户在滚动到所选部分时关闭该菜单。

谢谢！

Answer 1

您可以使用一些JavaScript / JQuery取消选中触发菜单的复选框。我不认为这可以简单地在css / html中完成：

事件监听器方法

此代码侦听其中一个菜单项的单击，然后从控制菜单滑出的复选框中删除已检查的属性。

<强> JavaScript的：

function addEventListenerList(list, event, fn) {
    for (var i = 0, len = list.length; i < len; i++) {
        list[i].addEventListener(event, fn, false);
    }
}

var navitems = document.getElementsByClassName('nav-item');
addEventListenerList(navitems, 'click', hidemenu); 

function hidemenu() {
    document.getElementById("nav-trigger").checked = false; 
}

来源：addEventListener on NodeList

或者jQuery：（如果你在网站上使用jQuery的话）

$( ".nav-item" ).click(function() {
   $( "#nav-trigger" ).attr('checked', false);
});

On Click call函数方法

或另一种方法是将功能直接附加到点击菜单项。您可以使用以下代码执行此操作：

HTML

<ul class="navigation">
    <li class="nav-item"><a href="#" onclick="hidemenu()">Home</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>Portfolio</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>About</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>Blog</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>Contact</a></li>
</ul>

的JavaScript

function hidemenu() {
    document.getElementById("nav-trigger").checked = false; 
}