单击页面时使导航覆盖消失

Question

我使用的是 CSS 导航覆盖菜单，代码如下

当您点击导航菜单并选择您要转到的页面时，叠加层会停留并且不会消失..

如果我将它链接到另一个 html 页面，它可以正常工作，但是由于我的所有页面都在一个页面上，所以我通过 href 将它链接到像 (href="#about") 这样的 div

知道单击导航页面后如何使覆盖菜单隐藏吗？

非常感谢您的帮助，谢谢

---

    <nav id="menu">

        <input type="checkbox" id="toggle-nav"/>
        <label id="toggle-nav-label" for="toggle-nav"></label>

        <div class="box">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#projects">Work</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
        </div>
    </nav>



a { text-decoration: none; }
    a:hover { text-decoration: underline; }

    li { list-style: none; }


    #menu .box {
        position: fixed;
        text-align: center;
        overflow: hidden;
        z-index: -1;
        opacity: 0;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        background: black;
        -webkit-transition: all 0.3s ease-in-out; 
        -moz-transition: all 0.3s ease-in-out; 
        -o-transition: all 0.3s ease-in-out; 
        transition: all 0.3s ease-in-out;
    }

    #menu ul {
        position: relative;
        top: 20%;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
        -webkit-transition: all 0.3s ease-in-out; 
        -moz-transition: all 0.3s ease-in-out; 
        -o-transition: all 0.3s ease-in-out; 
        transition: all 0.3s ease-in-out;
    }

    #menu li { 
        margin: 60px;
    }

    #menu li a {
        border-radius: 3px;
        padding: 15px;
        border: 1px solid transparent;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        color: #fff;
        -webkit-transition: all 0.2s ease-in-out; 
        -moz-transition: all 0.2s ease-in-out; 
        -o-transition: all 0.2s ease-in-out; 
        transition: all 0.2s ease-in-out;
    }

    #menu li a:hover { border-color: #fff; }

    #menu li a i { 
        margin-right: 5px; 
        font-size: 24px;
    }

    #toggle-nav-label {
        color: black;
        text-align: center;
        line-height: 30px;
        font-size: 30px;
        display: block;
        cursor: pointer;
        position: relative;
        z-index: 500;
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    #toggle-nav { display: none; }

    #toggle-nav:checked ~ .box { 
        opacity: 1;
        z-index: 400;
    }

    #toggle-nav:checked ~ .box ul {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    #toggle-nav:checked ~ #toggle-nav-label { 
        color: white;
        position: fixed;
    }

Answer 1

最简单的答案是使用 javascript 简单地取消选中复选框......但这有点违背了复选框黑客的目的，不是吗。除了让用户再次单击标签以关闭菜单之外，我想不出其他方法。有点毁了你想要的效果。如果没有更好的办法，这里有一个快速的 javascript 解决方案：

window.onload = function() {

 // Add a listener for any clicks on the menu
 document.getElementById('menu').addEventListener('click', function(edit) {
    var targetName = event.target.tagName;

    // Make sure that the element being clicked is a link or an icon
    if (targetName !== 'A' && targetName !== 'I') {
      return;
    }
    // Uncheck the checkbox
    document.getElementById('toggle-nav').checked = false;
  });
}

还有一个codepen。如果您想允许用户通过单击任何位置来关闭菜单，您可以将&& targetName !== 'DIV' 添加到 if 语句中。希望它有所帮助，或者有人想出更好的方法，因为就我个人而言，我很想找到一种仅使用 CSS 的方法。

---

编辑

修复了使用 targetName 的 JS 代码。添加了对图标的支持。修复了 codepen 演示以匹配 OP 演示。

---

编辑 2

发现跨浏览器错误。通过在函数参数中包含事件来修复 Firefox。