html - 选择选项后关闭滑出菜单

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

---

点击调用Function方法

或者另一种方法是在单击时将函数直接附加到菜单项。您可以使用以下代码执行此操作:

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